The text, and the login to see price buttons don’t align. I have tried different css styling it’s not working
here is the link to the preview copy https://tk5n4ipob1nfxpzb-64722895081.shopifypreview.com
Topic summary
-
Issue: Product titles of varying lengths were pushing “Log in to see price” buttons out of alignment on product cards.
-
Proposed fix: Add CSS in Shopify (Online store > Theme > Customize > Settings > Custom CSS) to truncate titles using -webkit-line-clamp. This limits text to a set number of lines with an ellipsis, keeping card heights consistent. Code targeted a.card-information__text and .card-information__top .card-article-info.
-
Implementation details: Initial suggestion used a 2-line clamp for titles. The user reported it didn’t work at first, shared preview links and screenshots, and was asked where the CSS was added. The user then set the title clamp to 1 line, which successfully aligned the buttons.
-
Outcome: Alignment issue resolved by reducing the title to a single line via -webkit-line-clamp: 1 (with -webkit-box, overflow: hidden, and text-overflow: ellipsis).
-
Current status: Original problem solved. A new request was raised to add “Account” text next to the account icon (screenshots provided). No solution for this follow-up has been given yet; discussion remains open on that item.
Hi @Villydev
You can follow the instruction here :
-
Go to Shopify > Online store > theme > customize
-
Click to Settings > Custom CSS > Paste this code to the section and save.
We see that due to the varying lengths of each product’s title, it causes the buttons to be misaligned. Therefore, the suitable solution is if the title is too long, to cut it off, allowing only two rows to display.
a.card-information__text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card-information__top .card-article-info {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Here is the result:
Hi, here is a link to the main preview. i Have applied it is not working https://1jqgsd6kie827587-64722895081.shopifypreview.com
Thank you so much for your quick response, but kindly check after i applied the styling why it’s not working
So i tried this changing the line clamp to 1 instead, thank you so much for helping me on this
a.card-information__text {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card-information__top .card-article-info {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
May I know where you have added the CSS code please?
Can you share with me the screenshot? thank you
You’re welcome 
1 Like
It worked, thank you so much, I just reduced the line text to 1 instead. I need help with one more thing, i want to add account text to my account icon. see image
