Match height of product cards on collection page

[rupeshadh]

Hi,

I have a collection page where the height of product cards is auto-adjusted on the basis of product title length. The more the length, the greater the height. I want to make the height equal for all cards in a row. How can I achieve this?

Store/collection link: https://arisit.com/collections/avs

I am using the Motion theme.

Please see the screenshot below.

[Dan-From-Ryviu]

Hi @rupeshadh ,

Go to Online Store > Themes > Actions > Edit code > Assets > theme.css or theme.css.liquid and add this code at the bottom of file, click Save button

.grid-product__meta { min-height: 155px; }

[Wish-It]

Add this CSS, it will set min height for each block so they match and also add padding to text to improve the aesthetics.

.grid-product__meta {
    min-height: 165px;
    padding: 0px 20px;
}
.grid-product__meta .grid-product__title {
    font-size: 18px;
}