Fix product-grid-item to equal height when title is more than 1 line

In the product grid, when the product title is more than 1 line, the grid height of the product changes.

How can we set the product item to have equal height, no matter the title length? (usually titles are 1-2 lines max).

Here’s how the issue looks like when I want to add a border-bottom.

Attachments:

You must be logged in to view attached files.

Hello,

There is the option to limit the product title, you can make one or two lines, in result, it makes all the items height equal and aligns on the same level. You can find this option in the Theme Settings > Shop > Product styles > Product title lines limit https://prnt.sc/pks5oo

Best Regards

Yea, that doesn’t actually solve the issue it just covers it by truncating the title which isn’t the correct outcome and I don’t want that. Product titles are very important 🙂

Plus, since the theme is based on Bootstrap 4, the equal grid height should be integrated by default.

So, do you have some fix for this, except Theme Settings > Shop > Product styles > Product title lines limit ?

Hello,

I can provide custom CSS which fixes the height of the element. The disadvantage of this way is that there will be a gaps in the grid in the products with a short title.

Best Regards

Hi Elise, thanks for the suggestion, I will take you up on the offer of the custom CSS.
Will be waiting for it.
Have a nice weekend.

Hello,

Please provide the page URL. You provided site access earlier, however, it seems that it is another site. If your site is under maintenance, please provide your site admin access to the private area as well.

Best Regards

Hi, please try again with the same details and URL provided above.

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-title, .product-grid-item .product-title{
min-height:36px;
max-height:36px;
}

You can change 36px as per your needs.

Best Regards

Hi Elise, I’m afraid that it doesn’t fix the issue.

The issue is that the .product-grid-item does not have equal height in the same row, look at the attached screenshot.

So your fix, it affects the title height but not the whole col in the grid.

https://gyazo.com/45c56933845f5f24c14ba04f1add6c67

Hello,

Please replace the code with this one:

body .product-title, 
body .product-grid-item .product-title{
min-height:36px;
max-height:36px;
}

This code fixed the product title to be one and the same height regardless of the length of the title.

Another problem is the images of different sizes. Please read and follow the instructions from this manual: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards

[Author]

Posts