CODEWITHSUNDEEP
javascriptjquerycssjquery-masonry
user4082764
user4082764

Reputation:

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

Upvotes: 0

Views: 233

Answers (1)

Alex Gill
Alex Gill

Reputation: 2491

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

Upvotes: 0

Related Questions