How To Remove Hyphens From Squarespace Mobile Sites

Squarespace is a great home for a website. Because all templates are mobile responsive, you can build your website knowing it will look great on any screen - desktop, tablet, mobile, and beyond!

Still, we have some style options available to us so we can control how our final site looks on mobile. It’s worth a look into some of the tweaks we can make since more than half of all websites are viewed on portable devices like, cell phones and tablets. You may have already noticed in mobile view that there are a few things you’d like to adjust.

If you read my previous post on including views of your Squarespace site in mobile, then you may have noticed something is a little off. I’m talking about those hyphens that appear between words or sentences. They kind of kill the vibe, right?

 

Before

 

After

 

Getting our mobile presentations just right helps our site visitors have a more user-friendly experience. Making our site easier to use will keep people on our sites longer, and are more likely to engage with our business.

A tweak we can make on mobile to give a better experience is getting rid of the hyphens that show up in our text. In this post, I offer a brief tutorial on how you can remove hyphens from the mobile view of your site.

Just follow along with me and we’ll get the mobile version of your Squarespace site looking polished and pretty.


A note, we’ll be diving into some code here, but not to worry because it’ll be super easy. Working with custom code in Squarespace is available to Business plans and all eCommerce plans.


Code: Remove Hyphens From Squarespace Mobile Sites


copy and paste the following into Custom CSS:

p, h1, h2, h3 {

-webkit-hyphens: manual !important;

-moz-hyphens: manual !important;

-ms-hyphens: manual !important;

hyphens: manual !important;

}

I hope this tutorial helped you! Feel free to share a link to your results in the comments below.


Want more Squarespace tips and tricks? Read more below!