How do i align my product title to be on the same line so the buttons can be on the same line too

[Villydev]

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 

[LizHoang · Accepted solution]

Hi @Villydev 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. 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: 

[Villydev]

Hi, here is a link to the main preview. i Have applied it is not working https://1jqgsd6kie827587-64722895081.shopifypreview.com 

[Villydev]

Thank you so much for your quick response, but kindly check after i applied the styling why it's not working 

[LizHoang]

May I know where you have added the CSS code please? 

Can you share with me the screenshot? thank you

[Villydev]

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 

[Villydev]

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;
}

[LizHoang]

You're welcome 😄

[Villydev]

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