javascriptjquerycssjquery-masonry

Jquery Masonry extra space

I am trying to make a image grid system using JQUERY Masonry but i have a space problem.

I have created this DEMO from codepen.io

If you visit the demo then please resize the page width<580px and then you can see there is a extra space how can i remove that extra space anyone can help me in this regard ?

I used this javascript for masonry selector

$(document).ready(function() {
  $('.image-container').masonry({
   isFitWidth: true,
   itemSelector: '.user-image'
  }).imagesLoaded(function() {
   $('.image-container').masonry('reload');
  });
});
Solution

  • This is working as expected.

    My suggestion to you would be to remove the float on the image container. This IMO gives you the presentation you should expect from Masonry.

    Code:

    .image-container {
/* float:left; */
  position:relative;
  max-width:580px;
  display: block;
  margin: 0 auto;
  padding-left:3px;
}