How to Prevent Word Wrap on Mobile in Squarespace
Sometimes when you have a long word and a font that’s too big, your word will wrap on the mobile view of your Squarespace website which is not ideal and looks unprofessional.
Keeping in mind that it’s important to use an H1 tag for your page title and H2s for subtitles, this can sometimes create a real issue for you.
One option is to reduce the size of the font, but of course, this will affect every place the font appears on the website.
Another option is to add a bit of CSS to prevent this super-long word from wrapping on mobile.
Keep reading to learn how to do it—it’s easy!
How to Prevent Word Wrap on Mobile in Squarespace
Follow this step-by-step tutorial to prevent word wrap on mobile in Squarespace:
Go to Website > Website Tools > Custom CSS
Copy and paste the code snippet below into Custom CSS
If you haven’t already, install the Squarespace ID Finder Chrome extension
Select the Squarespace ID Finder from your browser and locate the Section ID of the section where the word wrap is happening
Select the Section ID and it will automatically copy to your clipboard
Now you can de-select the ID Finder Chrome extension to get rid of the messiness on your screen
Highlight your code snippet where it says, “SECTION ID GOES HERE” and paste it
Select ‘Save’
So easy! If you get stuck, watch the tutorial above.
Scroll down for the code snippet ↓.
Code Snippet to Prevent Word Wrap on Mobile in Squarespace
/* Prevent word wrap on ___ page*/
SECTION ID GOES HERE .sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {
word-wrap: normal!important;
}
Was this helpful?
Did you try this and it worked? Does it still look wonky? Share your thoughts in the comments 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
