When The Product Title Is To Long It Shows 3 Dots ... Recently View Products Mobile/PC

[Yusa1]

Here an Example What I've been trying to do in RECENTLY VIEWED PRODUCTS it doesn't show up with the 3 DOTS

But in the product page it does show the 3 dots can someone help me code this for the Recently viewed products? For Mobile and PC URL -www.avokitchen.com

 

[DropAHint-Marc]

Hello,

This is Marc from Drop Hint 2.0 Email SMS Postal.

I understand that the Theme doesn't provide an option to change the text of the product.

However, fear not, as we can easily achieve this through custom code. Allow me to guide you through the process step-by-step:

1. Go to your Shopify admin dashboard and navigate to "Online Store" > "Themes."
2. Click on "Actions" and select "Edit code" for the Theme.
3. 

   In the "Assets" folder, locate and click on the "base.css" file to access the theme's main stylesheet.

   
4. Scroll to the bottom of the file and add the following code to adjust the title:

.card-information__text.h3 a.full-unstyled-link {
   overflow: visible;
   display: block;
}

Once you've made the desired changes, click on "Save" to apply the modifications.

Best regards,
Marc/Drop a Hint 2.0

[Yusa1]

It didn't work i'm trying to apply it to The recently viewed products only. But when ever i add the code the 3 dots for the other products collections it end up deleting them.

[DropAHint-Marc]

In the Recently viewed products it's already working. Check screenshot:

If you want it applied to another section, let me know which section you'd like it in, and I'll promptly send you the customized CSS.

Feel free to reach out with your preferences, and I'll be more than happy to assist you further.

Best regards,

[Yusa1]

That picture doesn't show proof of it working. 

[Yusa1]

It supposed to show the 3 dots at the end which in that screenshot it doesn't

[DropAHint-Marc · Accepted solution]

Then just add this:

#recently-viewed-products .h3.grid-view-item__title.product-card__title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

And you will get this: 

Hope this help 

[Yusa1]

Thank You!