Shopify themes, liquid, logos, and UX
I tried to limit the characters by using truncate, (found the code here in forum) it works fine but I need to keep the title at same level, it works on desktop but doesn't work on mobile.
So its better to limit the product title to 2 lines, not limiting the characters.
I tried the codes in this topic, it didn't work.
I use minimal theme.
My store link: https://wiggleduck.com/
Solved! Go to the solution
This is an accepted solution.
@thevista888, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
p.grid-link__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
Kind regards,
Diego
Hi @thevista888 ,
As I can see your title is lengthy so if you try for decrease the font size then it will not visible at mobile.
Right solution is keep one product in one row for mobile version. so that title will be in 2 lines.
Like this
How did you do it? I don't see any differences between the original file. Sorry if I'm missing.
This is an accepted solution.
@thevista888, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
p.grid-link__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
Kind regards,
Diego
Hi Diego! I tried your code in my store but it didn't change anything...
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024