Aligning reviews and prices on collection page

[bousy]

Hello I would like to ask anyone if you could help me out aligning prices and reviews on the same level. This happens when the name of a product is too long and therefore its not how it should be and looks off. I would be grateful if anyone could fix this issue.

 

[JHKCreate]

Hi There!

Sure thing, would you mind sharing your store's URL please? We will limit your title to 2 lines so that everything is aligned.

[JHKCreate]

Please add the following code to your theme.scss.css file at the very end:

.grid-view-item.product-card {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    min-height: 35px;
    margin-bottom: 5px;
}

Let me know! Cheers! 

[bousy]

Hello it doesnt do what I want it to do. Here is what it does.

 

[JHKCreate · Accepted solution]

That should do it!

.h4.grid-view-item__title.product-card__title {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    min-height: 35px;
    margin-bottom: 5px;
}

[bousy]

Thank you works perfectly.

[fudoon]

Hi 

I have the same problem using brooklyn theme, I want to align the stars of product review in the collection page, just below the product title, could you help me?

site URL is www.fudoon.fr

thanks for your help

M