How to remove hyphens on mobile on Squarespace 7.1
When viewing your Squarespace website on a mobile device, you might notice words breaking with hyphens in awkward places. While this can improve line breaks in narrow columns, it sometimes hurts the overall look and readability of your text—especially in headings or buttons.
In this tutorial, you’ll learn how to remove hyphenation from text on mobile in Squarespace 7.1 using a quick custom CSS snippet.
Table of Contents
Why Remove Hyphens?
Hyphenation is automatically enabled on some Squarespace templates to help prevent overflow or layout issues in narrow spaces. But you might want to remove it because:
It breaks up important keywords or brand names
It looks unprofessional in headings
It interrupts the visual flow of your content
It’s inconsistent across devices
Complexity: Easy
Step-by-Step Instructions
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the appropriate code into the Custom CSS editor box.
/* Remove hyphens on mobile */
@media only screen and (max-width: 767px) {
body {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6, p, span {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-break: normal;
}
}
How It Works
hyphens: none;disables automatic hyphenation.word-break: normal;ensures words don’t break in the middle.The media query
@media only screen and (max-width: 767px)targets mobile devices only.
Key Takeaways
Squarespace may hyphenate words by default to maintain clean text wrapping.
You can disable this on mobile for a cleaner, more professional look.
Use the CSS above to target headings, paragraphs, and spans.
FAQs
Will this affect desktop layout?
No, this CSS targets mobile screens only (max width 767px).
What if I only want to remove hyphens from headings?
Remove the p, span elements from the selector, like this:
Can I use this on specific pages only?
Yes. Use a page-specific ID like #page-id-123 before your selectors.
Conclusion
Removing hyphens on mobile in Squarespace 7.1 is a small yet effective way to improve your site's typography and user experience. A simple CSS tweak can go a long way in keeping your text clean, polished, and on-brand.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a Developer.
