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

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

lialia0
New Member
4 0 0

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

 

Replies 3 (3)

GabrielS
Shopify Partner
486 107 117

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.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
lialia0
New Member
4 0 0

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

 

GabrielS
Shopify Partner
486 107 117

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.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.