if someone would be willing to help me I can also provide a link to the site upon request
I am having a problem with my image gallery collapsing on itself as I am resizing the browser. I am using masonry.js in conjunction with the Skeleton Boilerplate. It seems to me that this problem occurred when I added the isFitWidth option to my code to center the images within the div. I have tried setting container widths and ColumnWidth but nothing seems to be working. I am relatively new to web design and would greatly appreciate any help anyone can give. I am also sorry in advance if I formatted the code below incorrectly.Thanks
HTML
<div class="row ">
<div class="three columns portfolio"><a href="images/alex_gallery_blk.jpg"> <img src="images/alex_gallery_blk.jpg" alt="Contribution: Hairstylist & Make Up Artist"/></a>
</div>
<div class="three columns portfolio"><a href="images/viva_gallery.jpg"> <img src="images/viva_gallery.jpg" alt="Contribution: Hairstylist & Make Up Artist"/></a>
</div>
<div class="three columns portfolio"><a href="images/alex_gallery.jpg"> <img src="images/alex_gallery.jpg" alt="Contribution: Hairstylist & Make Up Artist" /></a>
</div>
<div class="three columns portfolio"><a href="images/bex_gallery.jpg"> <img src="images/bex_gallery.jpg" alt="Contribution: Hairstylist & Make Up Artist"/></a>
</div>
</div>
</div>
CSS
.main{
text-align:center;
margin: 0 auto;
}
img{
max-width: 100%;
}
.portfolio {
margin:0 auto 5px auto;
-webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}
jQuery
$(window).load(function() {
var $container = $('.main');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.portfolio',
isFitWidth: true,
animate: true
});
});
});
