A user is experiencing a text wrapping issue on mobile where words break mid-character instead of moving complete words to the next line. The problem specifically affects an h2 heading containing the word “collection.”
Attempted Solution:
word-break: normal !important; but it didn’t resolve the mobile display issue.Proposed Fix:
Another user suggested replacing the CSS with:
h2 {
overflow-wrap: normal;
word-break: keep-all;
}
The discussion remains open—no confirmation yet on whether the suggested solution resolved the problem. A screenshot was provided showing the text breaking issue on mobile.
See the screenshot where the text custs in the middle of the word collection, instead of just moving the whole word collection to the next line. I cannot get this to work. I have tired:
h2 {
word-break: normal !important;
}
But it doesn’t work on mobile. Please let me know how to fix this.
https://juede-official.myshopify.com/
Password: sundaymorning
use this css instead
h2 {
overflow-wrap: normal;
word-break: keep-all;
}