How can I adjust product title length for uniform 'Add to Cart' positioning?

[davidwu1604]

Hi all,

I would like to make all the product titles have the same length in product title so the ADD TO CART can stay at the same level.

I have tried to put this at the theme.css

#main-collection-product-grid .product-item__title {
     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
     overflow: hidden;
}
.product-item__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

I also tried

and

but it still doesn’t work.

www.nominalhk.com here is the url

Does anyone know which part did I make a mistake on?

Thanks a lot!

[saim007]

@davidwu1604 Please use below CSS code in your theme.css

.product-grid--title a {
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Please let me know when work and like and mark as solve!

[davidwu1604]

hi do I still need to keep this as well?

{
.product-item__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

now it looks like this

on mobile is excellent, but on desktop only sees one line instead of two.

i have keep this following:

 

  

    

      {% if show_vendor %}
        
{{ product.vendor }}

      {% endif %}
      

        {{product.title | truncate: 30}}
      

thanks!

[saim007]

@davidwu1604 If i helped you please like and mark as solve! Thanks