Product display

[youngstudios]

I was wondering if you could assist me in determining the cause of a product display issue.

Everything works fine in categories with many products.
https://ayoungstudios.com/product-category/paper-prints/

however this category with 3 products there is a problem (in chrome only).
https://ayoungstudios.com/product-category/originals/

*the products do not go 3 columns and there is a large black box below the one product.

Thank you,

[christian]

Hey @youngstudios,

It looks like the masonry’s calculation is off due to the huge difference in the aspect ratio of the images.

Let us first remedy the long black box issue in your live site by putting the code below in Theme Options > CSS.

.woocommerce li.product .entry-wrap:before {
    height: 15em;
}

In your Paper Prints page, I see some of the buttons leaking out of some of the items.

To remedy that temporarily, please add this code in Theme Options > CSS.

.woocommerce li.product .entry-wrap {
    z-index: 0;
}

The 3 columns displaying as 2 is the masonry’s calculation based on the image aspect ratios. Would you mind testing 2 or more items to that page?

Please then copy your site in a staging server so we could investigate this issue deeper without affecting your live site. This is so we could see your exact setup and try to replicate it in our test sites and see if this is a bug or not.

Thanks.