Solved

When the Product Title is to long it shows 3 dots ... at the end it doesn't continue On PC/MOBILE

Yusa1
Excursionist
46 0 1

Hello, I'm trying to make the Product Title To Diminish When there's a lot of words On PC/MOBILE

 

Website - https://avokitchen.com/

 

EXAMPLE - I want it to be like this

Yusa1_0-1688933584994.jpeg

 

 

On my website it shows the whole title

Yusa1_1-1688933585183.jpeg

I will gladly appreciate if someone can help me on this.

Accepted Solutions (3)

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

Hello!

 

You need to add this styles in your custom code stylesheet.

 

@media screen and (max-width: 768px) {
  .full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

 

Result:

 

dannyelo_0-1688957210782.png

 

Hope this helps.

 

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here

View solution in original post

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

You are welcome my Yusa!

 

Yes, all you have to do is change the property:

-webkit-line-clamp: 3;

 

This determines the number of lines desired, change the 3 for a 2. And there you have it.

 

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here

View solution in original post

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

You are welcome!

Yes you can, just remove the media statement. Leave it like this.

 

  .full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

 

Best,

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here

View solution in original post

Replies 5 (5)

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

Hello!

 

You need to add this styles in your custom code stylesheet.

 

@media screen and (max-width: 768px) {
  .full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

 

Result:

 

dannyelo_0-1688957210782.png

 

Hope this helps.

 

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
Yusa1
Excursionist
46 0 1

Hello Danny, thanks so much. Was wondering if those 3 dots could show up sooner like that there would be 2 row instead of 3.

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

You are welcome my Yusa!

 

Yes, all you have to do is change the property:

-webkit-line-clamp: 3;

 

This determines the number of lines desired, change the 3 for a 2. And there you have it.

 

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
Yusa1
Excursionist
46 0 1

Thank you it helped. Is there a way to apply this to PC too

dannyelo
Shopify Partner
180 37 36

This is an accepted solution.

You are welcome!

Yes you can, just remove the media statement. Leave it like this.

 

  .full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

 

Best,

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here