How can I fix CSS product alignment issues?

[jay-sig]

Hi everyone,

Can anyone help me with the style issue.

You could see my attached image that is showing the products are not in a horizontal line because the middle product has a longer name. When the screen is getting smaller, the name will be dropped to another line.

What is the best way to resolve it? Do you have any ideas?

Thank you in advance,

Jay

[MarinaPetrovic]

Hi @jay-sig , sure it can be solved. Please share URL.

[jay-sig]

Hi Marina,

Thank you for you reply, here is the link, https://shop.signaturemedispa.com/collections/products

You will find the issue that I said when you shrink the screen size. The issue also happened on mobile device.

Thank you,

Jay

[MarinaPetrovic]

Hi @jay-sig , go to edit code > assets >theme.css and find this:

.product-list-item, .product-grid-masonry-sizer {
    margin: 20px 0 30px;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
    font-size: 1rem;
}

Replace it with:

.product-list-item, .product-grid-masonry-sizer {
    margin: 20px 0 30px;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 20px;
    font-size: 1rem;
}

Before:

After:

[jay-sig]

Hi @MarinaPetrovic ,

Thank you for you answer.

You save my day, you are amazing, you are a genius.

Thank you very much!

Jay