0

I hope someone can shed some light on this issue I'm having with Bootstrap.

I've noticed that my "container-fluid" divs that contain responsive images are slightly smaller than the "container-fluid" divs I have that just contain text.

I'm not sure why this, and it means the site I'm building has inconsistent sizing on the pages with responsive images. For example:

<div class="container-fluid">
 <div class="row">      
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    </div>
</div>

When I inspect the container-fluid element in chrome its size is 1600x50 px, yet when I replace the paragraphs with images:

<div class="container-fluid">
 <div class="row">      
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    </div>
</div>

The container-fluid element in chrome its size is now 1583x333 px, and every container-fluid on the page has shrunk to this smaller width. This means the navbar is a different size on this page compared to the others on my site - not good!

The css for img-responsive is fairly innocuous:

 .img-responsive{
  display: center-block;
  max-width: 100%;
  height: auto;}

So I'm stumped. I've looked at changing the margins on the img and img-responsive classes in the css but had no joy. Any suggestions will be greatly appreciated!

fuzzy_logic_77
  • 387
  • 1
  • 4
  • 14
  • Sorry I cant reproduce your issue. Maybe add a **[JSFiddle](http://jsfiddle.net/)**. Keep in mind: **Mobile First!** always add `col-xs-XX` to your columns. `col-xs-12` for full width of course. – AlexG Aug 27 '15 at 13:21
  • why are your three columns using `col-sm-6`. Bootstrap uses 12 grid system, 6 x 3 = 18. Also, there isn't a value of `center-block;` for `display`. – Chris Yongchu Aug 27 '15 at 19:53

1 Answers1

0

Thanks for the input. It turns out the problem was due to the images taking up more vertical space than the viewport could show, necessitating the addition of a scrollbar, which in chrome alters the width of the screen. This question has been asked already and answered elsewhere on stackoverflow.

Community
  • 1
  • 1
fuzzy_logic_77
  • 387
  • 1
  • 4
  • 14