How To Remove Hyphens From Mobile On Your Squarespace Site

 Make your mobile site optimized by quickly removing those pesky hyphens from your site. Click through to read the full blog post

Today’s post will be a short one but it’s super helpful when looking to make your site mobile friendly. Squarespace sites come mobile optimized already but for some reason they didn’t get rid of hyphens. First of all, what are the purpose of hyphens anyways!? I mean I know what the purpose is but who actually uses them?


Anyways, I wanted to share the custom CSS code you can plug in to your site to make it look more mobile friendly and keep all your words together. I do want to mention that my site is built on the Brine family template but it should work on most templates.


This is what my mobile site looked like before I entered the custom CSS code:

 
Home Page with Hyphens
Brand + Website with Hyphens.png
 

Here is how it looked like after: 

 
Mobile Friendly Home Page
Brand + Website Mobile Friendly.png
 

Way better without the hyphens, right? Funny how such a small thing can make a difference on how your site looks and feels on mobile.


Ok so as promised here is the custom CSS code you can use to get rid of those annoying hyphens on the mobile version of your site.


p, h1, h2, h3 {

    -webkit-hyphens: manual !important;

       -moz-hyphens: manual !important;

        -ms-hyphens: manual !important;

            hyphens: manual !important;

  }


Simply go to Design ==> Custom CSS ==> and enter the code above and you're basically done.  Yep as simple as that!

Related Posts: