Squarespace 7.0 tip: How to stop hyphens breaking up your text on mobile!

I’m going to show you a very handy little bit of CSS to add to your Squarespace website to ensure that your text isn’t split up by hyphens on mobile view. The thought of having to add some code to your Squarespace site may make you feel a little panicky but fear not!

What do I even mean, ‘split up by hyphens’? Well take a look at the two images below. The first is a screenshot of my husband’s website in desktop view. All looking great! And the second is a screenshot of the same website page on mobile view. Aarrrrgh! The hyphen in the middle of ‘shep-herd’s’! Where did that come from?

Desktop view

Mobile view

Squarespace automatically breaks up words as it needs to on mobile view (due to the reduced width of the page) and adds hyphens to those split up words. Which isn’t great is it?

The good news is that it’s really simple to remove those hyphens with the addition of a snippet of CSS code to your site. This is what you need to do.

  1. From the main menu in Squarespace, go to Design and then Custom CSS.
  2. You will see a white panel which may be empty or may already have some custom CSS in it. If it’s the latter, don’t touch what is already there! Scroll down to the bottom of any existing CSS or, if the panel is empty, you’ll be adding the CSS to line 1.
  3. Copy the following CSS:

    /* Prevent Hyphenation */ 
    p, h1, h2, h3 { 
    -webkit-hyphens: manual !important; 
    -moz-hyphens: manual !important; 
    -ms-hyphens: manual !important; 
    hyphens: manual !important; }

  4. Paste the CSS that you’ve just copied in to the CSS panel.
  5. Click save.

And you’re done. You can preview the changes to the mobile view by clicking the short line right at the top of your screen when viewing your website whilst logged in to your Squarespace account. Alternatively you can check on your phone of course!

mobile view without hyphens – ‘shepherd’s’ not ‘shep-herd’s’!

  1. I am new to Squarespace so this is aweseome! Thanks for the tip!

Leave a Reply

Your email address will not be published.