Reputation: 151
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",
});
});
Upvotes: 3
Views: 5211
Reputation: 6551
So the fiddle wasnt a whole lot of help but thanks for posting what code you could...
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
Upvotes: 4