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

Store Design
1

davidwu1604_0-1708679915050.png
davidwu1604_0-1708679915050.png400×319 25.8 KB

Like this. Not the complete title just first few words then the “…”> > Link:- https://5d920b-85.myshopify.com/

2

Hi @salmanwanix
Try adding the below properties to you title element

.your-title-element-class{
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Replace “your-title-element-class” with your title’s class.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

1 Like
3

Can you please tell me where exactly will I find the title element to make the above change.

4

Hi @salmanwanix
Please share your store URL so that I can provide you exact code
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

5

Here is the url :- https://5d920b-85.myshopify.com/

6

@salmanwanix
Try adding the below code to end of “base.css” file

.collection h3.card__heading a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 36px;
}

This will reflect in all the product cards.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!