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:

    <a href="{{ product.url | within: collection }}" title="{{product.title | truncate: 30}}" class="grid__image grid__image__match">
 

  <div class="grid-view-item--desc-wrapper">
    <div>
      {% if show_vendor %}
        <div class="product-grid--vendor-text">{{ product.vendor }}</div>
      {% endif %}
      <div class="product-grid--title">
        <a href="{{ product.url | within: collection }}">{{product.title | truncate: 30}}</a>
      </div>

thanks!

[saim007 · Accepted solution]

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