Bootstrap 3 grid breaking with responsive images of not the same height

Question

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):


     Hello world

     
        
            
        
    


     
        
            
        
    

    ...

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.

jme11 · Accepted Answer

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;
  }
}


  Hello World!

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).

Bootstrap 3 grid breaking with responsive images of not the same height

Answers (1)

Related Questions