CODEWITHSUNDEEP
twitter-bootstrap
user2431058
user2431058

Reputation: 115

Bootstrap 3 responsive thumbnails not aligning properly in Chrome or Firefox

I have built a grid of thumbnails in Bootstrap 3. In the large and medium columns, they're aligned in 3 columns across and in the small and xsmall grids 2 across. In Safari the thumbnail columns and rows work great in all the grid systems. In Chrome and Firefox, in the large and medium column grids, the second row of thumbnails get pushed over so that the first row is "blank" and the thumbnails start in the second (middle) row. The small and xsmall columns work as expected. Here is the code:

<section class="container gallery">
 <div class="row">
  <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-12">
    <div class="row">

      <div class="col-lg-4 col-md-4  col-sm-4 col-xs-6">
          <a href="#"><img class="img-responsive img-thumbnail" src="1-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="2-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="3-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="4-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="5-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="6-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="7-tn.jpg" alt=""></a>
      </div>

    </div>
  </div>
</div>
</section>

So I assumed that by since I didn't set a new row tag in for the second column, I am not getting Bootstrap's row default -15px left and right padding and the overall width of my row is too large. When I go into Chrome's developer tools and turn off the col-lg-10 left or right padding, the thumbnails align properly, confirming my hunch. Yet I don't want to set rows explicitly since the number of thumbnails in a row will vary depending on which size grid is called. I can set up media queries for each size gallery but that seems clunky. I did try to add a css rule body#home .gallery .col-lg-10, body#home .gallery .col-md-10 and it worked for the large columns but not the medium columns. I have my img tag set to height: auto; max-height: 100%;. Anyone have any solutions?

Upvotes: 0

Views: 2089

Answers (1)

user2431058
user2431058

Reputation: 115

I figured it out myself. I thought all my images were the same size but the top left image was 1 pixel taller and knocked the images underneath of it out of alignment. I was tearing my hair out trying to figure it out and it always seems it's something like this when you do figure it out.

Upvotes: 3

Related Questions