Alignment of Thumbnail Boxes

[xojaynee]

Hi! I’m trying to align my product boxes to make them look neater, but can’t figure out a way to do so. I have already resized the images to be of the same width and height (400 pixels), yet the problem is not solved.

.product_list {
    margin: 0 -23px -23px 0;
}

.product_list li {
    width: 300px;
    margin: 0 23px 23px 0;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #e1e1df;
    text-align: center;
}

.product_list a {
    display: block;
}

.product_list a:hover {
    opacity: 1;
}

.product_list .image_container {
    overflow: hidden;
}

.product_list .image_container img {
    max-width: 300px;
    max-height: 400px;
    vertical-align: middle;

    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.product_list .image_container:hover img {
    opacity: 0.9;
}

Realized that the box on the most right (“giraffe onesie”) doesn’t begin on the same ‘line’ as the others. How do I fix this?

Here as well.

How do I align the images?

Here’s the link to my site.

[SamA74]

As in the other topic, the li is positioned absolutely. That position is being set by javascript inserting in-line styles to the element, that’s why you don’t see it in the css.
This would probably work better is the items were inline-blocks or used flex-box for layout.

[xojaynee]

how can I fix this?

[PaulOB]

@xojaynee

how can I fix this?

You are using masonry to arrange and pack those images and its doing exactly what it should do. If you don’t want a masonry layout then don’t use that script and use display:inline-block or flexbox instead.

The problem will be that your images are not the same size when you include the captions so you cannot float them. Use display:inline-block and the image will align in rows.

Masonry packs images into each column filling all gaps and if you had more images of different size the effect would be more obvious.