A user is experiencing text breaking issues where letters split awkwardly when resizing browser windows.
Initial Solution Provided:
body.rte.text__text-with-image p {
word-break: auto-phrase;
}
Follow-up Issue:
The problem persists on the contact page specifically.
Root Cause Identified:
The base.css file contains a break-all property that is forcing text to break at any character, causing the unwanted letter splitting.
Recommended Fix:
word-break property from break-all to a more appropriate value!important to override existing stylesThe discussion remains open as the user works to implement the suggested CSS modifications.
Hi @clayinfo
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.image-with-text__text.rte.body p {
word-break: auto-phrase;
}
And Save.
Result:
