Search code examples
javascripttwitter-bootstrapjquery-isotopemasonry

Isotope/Masonry images overlapping on resize

I am using bootstrap and isotope to create a filterable responsive grid, however, my images are getting overlapped on resize. I am using DeSandro's imagesLoaded so that images don't overlap on load.

Resizing the example below will make the .col-md-4 divs to overlap. Any idea why this is happening?

Example here.

.col-md-4 Items overlapping:

.col-md-4 Items appear overlapping on resize

I have the following HTML:

<div class="container">

  <div id="isotope" class="row">

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/630">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/315">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/316">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/317">

    </div>

  </div>

</div>

And this is my JS:

var isotope = $("#isotope").isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.col-md-4'
  }
});

isotope.imagesLoaded(function() {
  isotope.isotope('layout');
});
Solution

  • Use col-xs-12 in addition to col-md-4 and col-md-8 in your div classes. This tells isotope the size the images should be and stops them overlapping.

    <div class="col-xs-12 item col-md-8">

  // content here

</div>