How to Remove Hyphenation on Your Squarespace 7.0 Site
Does your Squarespace site weirdly (and NOT wonderfully) hyphenate words especially when they are displayed on a small screen?
Chances are that you are using a 7.0 Squarespace site and the EASIEST way to get rid of this funky feature - is to simply UPGRADE YOUR SITE to Squarespace 7.1!
One thing we all love about Squarespace is how it is intuitive and easy to learn, allowing small biz owners like you to create and manage your own site without any coding knowledge. The built-in style editor offers many options: customized colours, fonts, and now with Squarespace 7.1 Fluid Engine, incredible design layouts with layers.
Squarespace is responsive, and in 7.0 (and the beta version of 7.1) the system automagically hyphenated text to make it fit in the available space. It left users frustrated, especially when the hyphenation made it look like a first grader gone mad with a marker was managing the text.
So, if you want to get rid of this pesky problem - upgrade to 7.1.
But if that isn’t the solution for you - here is a tiny bit of CSS code that will stop Squarespace automatic hyphenation in its tracks.
If thinking about coding CSS is causing your keyboard to quiver, don’t worry! This is a super simple tweak to your and all you need to do is copy and paste. Together, we will have this change made in just a few minutes.
Design > Custom CSS
Head over to the Design Menu and find Custom CSS.
Copy and Paste the bit of code you need below.
// REMOVE HYPHENS ALL TEXT SQUARESPACE 7.0 //
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
// REMOVE HYPHENS HEADINGS ONLY SQUARESPACE 7.0 //
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
// REMOVE HYPHENS MOBILE ONLY SQUARESPACE 7.0 //
@media only screen and (max-width:660px) {
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
Don’t let those troublesome hyphens ruin the look of your website any longer! With just one line of code added into Design > Custom CSS on Squarespace, you can remove them in no time at all and enjoy beautiful smooth paragraphs that look much more professional than before especially when you have spent so much time learning about text and font customization on Squarespace.
Of course, if coding isn’t your thing then don't worry—you can always leave it up to the team at Elmtree Digital Marketing to help you design the Squarespace site you are dreaming of!
