How do you fix the letter breaks that happens when you resize a window
www.constructionlayers.com
PW: CollectionThree
Topic summary
A user is experiencing text breaking issues where letters split awkwardly when resizing browser windows.
Initial Solution Provided:
- Navigate to Shopify Admin → Online Store → Themes → Actions → Edit code
- Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the following CSS code:
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:
- Locate and modify the problematic CSS rule in base.css
- Change the
word-breakproperty frombreak-allto a more appropriate value - If changes don’t take effect, add
!importantto override existing styles - Save changes and refresh the browser
The discussion remains open as the user works to implement the suggested CSS modifications.
1 Like
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:
