Menu
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",
});
});
934
asked Dec 03 '25 05:12
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
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
