Dawn theme Cart text flows into next line when there is still space for it

Technical Q&A
1

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

lialia0_0-1664554200244.png
lialia0_0-1664554200244.png1747×840 67.6 KB

2

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.

3

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.

lialia0_0-1664555677659.png
lialia0_0-1664555677659.png657×363 24.9 KB

4

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.