Solved

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

davidwu1604
New Member
9 0 0

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.

davidwu1604_0-1708675976863.png

davidwu1604_1-1708676170301.png

 

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

davidwu1604_2-1708676539963.png

 

and 

davidwu1604_3-1708676570599.png

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!

 

Accepted Solution (1)
saim007
Shopify Partner
507 64 83

This is an accepted solution.

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

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

View solution in original post

Replies 3 (3)

saim007
Shopify Partner
507 64 83

@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!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
davidwu1604
New Member
9 0 0

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

davidwu1604_0-1708679915050.png

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>

davidwu1604_1-1708680186340.png

 

thanks!

saim007
Shopify Partner
507 64 83

This is an accepted solution.

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

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂