Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
Hoping you can help me with what is hopefully a simple issue. Please see the screenshot before. The text in the cart page flows into the next line when there is still space for it, but also cuts off the word halfway which I would not prefer. Any help to fix this would be much appreciated, thank you in advance!
Here is the link if that helps: https://vitra-gems.myshopify.com/cart
Hello,
Adding the below CSS code at the end of your 'base.css' file should fix the issue.
.cart-item__details>* {
max-width: 40rem !important;
}
Let me know if this fixed your issue.
Thank you so much! Yes this helped in that the words are now on the same line. I am still having the issue however on mobile view or if the window is resized to be smaller that sometimes part of a word will flow onto the next line (see example below). I'd rather the entire word just be moved to the next line. Is this something that can be fixed? Thank you again.
A solution can be to further increase the width on mobile phones, as below.
@media (max-width:768px) {
.cart-item__details>* {
max-width: 60rem !important;
}
}
Or, if you want the text to be broken into two rows, you can decrease the 'max-width' - however, assuming that the text is different based on the product, it may not look the same to each.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025