1

I'm trying to make a simple grid with responsive images in it. My images are movie covers and some are a few pixels less taller than others which seems to destroy my grid right now.

You can see the problem on the fiddle here: http://jsfiddle.net/tbergeron/qzt8enaz/7/

enter image description here

Here's a short sample (please see the fiddle to really see the bug):

<div class="row">
     <h2>Hello world</h2>

    <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> 
        <a href="#">
            <img src="..." class="img-full" />
        </a>
    </div>


    <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> 
        <a href="#">
            <img src="..." class="img-full" />
        </a>
    </div>

    ...


</div>

The only possible way I found to fix this is to set a fixed height but then again it breaks the responsiveness of the element.

Any ideas?

I'm aware that I should add a container, etc but that doesn't help to fix the issue and I wanted to keep the sample code minimal.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Tommy B.
  • 3,591
  • 14
  • 61
  • 105
  • I just need one row of multiple elements. I don't have a static number of element per row which is why I'm not using any rows and thrown all cols in the same row. About `img-responsive` sets `max-width`, I need `width` to be set to `100%` which `img-responsive` doesn't do. My example works very well without the images, it should work with the images as well. Thanks for commenting. – Tommy B. May 20 '15 at 20:55
  • 1
    See my answers here: http://stackoverflow.com/questions/24590222/bootstrap-3-grid-with-different-height-in-each-item-is-it-solvable-using-only/24590544#24590544 and here: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows/24571644#24571644 – jme11 May 20 '15 at 20:56
  • @jme11 Looks exactly like what I'm looking for! I'll go try it now, thanks! – Tommy B. May 20 '15 at 20:57
  • @jme11 I tried to apply your fix as described (the css way) on my fiddle and it doesn't fix the issue. Any ideas? thanks! updated fiddle: http://jsfiddle.net/tbergeron/qzt8enaz/11/ – Tommy B. May 20 '15 at 21:03
  • @jme11 jquery way is a good idea but doesn't apply to my case after thinking and trying it. my images needs to keep resizing when resizing the browser so setting a fixed height isn't a solution. Thanks – Tommy B. May 20 '15 at 21:21
  • I'll provide an answer, but the problem is that you've got an h2 in the same div so it's throwing off the counts in the css. Give me a minute to fix and I'll post the answer. Here's your update fiddle: http://jsfiddle.net/qzt8enaz/13/ – jme11 May 20 '15 at 22:04
  • 1
    Just add `clearfix` `
    `s as described in http://getbootstrap.com/css/#grid-responsive-resets
     – cvrebert May 21 '15 at 04:44
  • You might have come to this question looking for something like https://github.com/desandro/masonry ... I was. – Robert Claypool Nov 15 '19 at 04:54

1 Answers1

4

So the way the technique works in my answers provided in the comments is that you use the nth-child to give the .clear class some css to provide the clearfix. The thing about nth-child is that it literally counts every child, so in your original fiddle you had an h2 element as the first child element in the row. Following the rest of the css rules, the media queries were not being applied because the .clear class was never found at the specified nth-child position.

Here's the fix:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
 .img-full {
  width: 100%;
}
@media (max-width: 991px) {
  .portfolio>.clear:nth-child(6n):before {
    content: '';
    display: table;
    clear: both;
  }
}
@media (min-width: 992px) {
  .portfolio>.clear:nth-child(12n):before {
    content: '';
    display: table;
    clear: both;
  }
}
<div class="container">
  <h2>Hello World!</h2>
  <div class="row portfolio">
    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30badboys.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/fullmetalalchemistbrotherhood.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/magithelabyrinthofmagic.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/rushbeyondthelightedstage.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30surviveandadvance.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/thebestofmen.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/houseofcards.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/marvelsagentsofshield.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/broadchurch.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/historyoftheeagles.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


  </div>
</div>

Also, just to clean things up a bit I removed the unneeded classes of sm and lg. Bootstrap grid is applied up to the next grid class. For example, if you apply col-xs-4 and col-lg-6, you'd get 3 columns of content for every breakpoint up to the lg breakpoint (1200px), when you'd get 2 columns of content.

Just to reiterate, the nth-child in the css above counts every direct child of the element with the portfolio class applied, so each image group and each clear div is counted. Since you've got col-xs-4 applied to your image groups, the result is 3 images per 'row'. Therefore, you want the clear at the 6th child element for all breakpoints up to the md breakpoint. The col-md-2 class results in 6 images per 'row', so at that breakpoint and above, you need to clear at the 12th child of the portfolio. Make sense?

The result is that you only need two media queries: one for max-width of 991px (or the maximum width of the sm breakpoint) and one for the min-width of 992px (or the minimum width of the md breakpoint).

jme11
  • 17,134
  • 2
  • 38
  • 48
  • I couldn't be more happy right now! It's exactly what I was looking for and it works flawlessly once properly applied. Also thanks for the bonus tips about the grid sizes and yes it makes a lot of sense. Thanks again, very good answer! – Tommy B. May 21 '15 at 20:09