Responsive image gallery using Masonry

css, html, jquery, jquery-masonry, twitter-bootstrap

Solution

So the fiddle wasnt a whole lot of help but thanks for posting what code you could...

- using class naming conventions that are defaults in CSS such as class="image" is a bad idea.

- I couldnt do much with the fiddle... But i went to the demo and made this how i think you want.

Your going to want to add a wrapper div around all of the gallery

HTML

<body>
 <div class="galleryContainer">
   //this is where all the code in the gallery goes including the container on the     gallery because it is dynamically changed
 </div>
</body>

CSS

.galleryContainer{
   width: 50%;   //or whatever you would like
   height: 600px;   //or whatever you would like
   margin: 0 auto; //center the gallery horizontally
   overflow: auto; //allows you to scroll the gallery when some pictures cant be displayed
}

the previous code also allowed all re sizing and mobile compatibility to work fine. Hope this helped

Problem

I am trying to implement this responsive image gallery http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/ The example however uses the entire viewport but I am using HTML5 boilerplate with bootstrap and my image gallery is only showing two columns which are spaced out instead of having the default 5 column display as the demo shows here http://demos.creative-punch.net/masonry-gallery/ This is what I get with a 1200+ px width container I have placed the entire gallery within a container class. But I am not sure what CSS properties I have to adjust to have the images fill the entire div. How can i do this ? I have created a jsfiddle but I can't seem to replicate the issue without including the entire project but hopefully someone finds this helpful and can demonstrate what is happening. http://jsfiddle.net/CVU3r/ ``` <div class="grid-sizer"></div> <div class="item"> <img src="http://placekitten.com/650/450" class="image"> <a class="overlay" href="#"> <h3 class="title">Some title</h3> <div class="description"> <p> Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit. </p> </div> </a> </div> $(window).load( function() { $('#container').masonry({ "itemSelector": ".item", "columnWidth": ".grid-sizer", }); }); ```

Original source