0

I've tried to center the items of my masonry layout, but it still always floats left and has lots of white space at certain browser widths. Also how could I get more padding on the bottom of the container between the hr element? Here's the website page link: http://www.gabrielleelizabethstudios.com/gallery_template.html

HTML: 

<div class="masonry js-masonry"
  data-masonry-options='{ "itemSelector": ".item", isFitWidth: true}'>
  <div class="item">
        <a class="group1" href="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg" title="justin merriman 2014"><img width="167" height="250" src="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg"/></a>
    </div>
    <div class="item w2">
        <a class="group1"...

CSS:

.item img{
    border-radius: 10px;

}
.masonry{
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 35px;
}

.masonry .item{
    margin-bottom: 20px;
    margin-top: 20px;
    height: 250px;
    float: left;
    margin: 10px;
}

.item { width: 167px; }
.item.w2 { width: 375px; }

@media only screen and (max-width: 720px),
    only screen and (max-device-width: 720px){
        .masonry{width: 95%;}
    }
gboltz178
  • 3
  • 2
  • Try removing `float: left;` from `.masonry .item`. – henrywright Jul 13 '14 at 00:33
  • If I do that then they are all on top of each other vertically. – gboltz178 Jul 13 '14 at 00:34
  • So you want them to float left? – henrywright Jul 13 '14 at 00:35
  • I would like them to float left, but also I would like the container to be centered as to eliminate the white space on the right created from the float: left; . – gboltz178 Jul 13 '14 at 00:38
  • Your Masonry plugin isn't even positioning anything; check the error console. Anyway, these images are all the same height, so why use a masonry plugin at all? Just remove the float and center the images with text-align: center. (If you keep them inside the .item divs, make those divs display: inline-block) – RwwL Jul 13 '14 at 00:46

0 Answers0