css for squarespace: say goodbye to hyphens on mobile
With a few years of custom Squarespace web designs under our belt, we have definitely come across a variety of limitations with the existing templates. Sure, we love the ease-of-use and gorgeous layouts that Squarespace provides, but sometimes something just doesn't look quite right without a little extra tweaking.
One of our biggest pet peeves to date is text breaks and hyphenated words on mobile. We know you've been there...your site looks perfect on your desktop view with big, bold headings and custom fonts. But, then you switch over to your mobile view and you are greeted with multiple text breaks and hyphenated words - major bummer, right!?
Your first instinct might be to head on over to the Style Editor to play around with the size and spacing of your fonts. But then you realize that these changes are taking the oomph out of your headers, making them look kind of dinky on your laptop and tablet.
Honestly, what's a girl (or guy) to do?!? Well, it's your lucky day because we are ready to let you in on a little secret and will show you how to nip this problem in the bud with a little CSS magic!
We've been searching for a solution for this dilemma for what feels like forever and finally came across this bit of custom CSS coding on My Billie Designs' website and believe that it is a serious game changer.
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
She does an excellent job of breaking down the code on her blog. "The items on the first line are the “selectors”, so these are the headers and text blocks that will be affected by the code that follows it. Here we are targeting body text (“p”) and all the normal headers (h1, h2, h3). If you use quotes or any other text blocks, you will need to include those in the selectors too."
To apply this bit of code simply head on over to the Admin panel on your Squarespace dashboard and follow these steps:
- Click on DESIGN and scroll down to find CSS
- Click on CSS and your coding window will open
- Copy the code above. I typically like to label all my CSS tweaks with a title (i.e. Mobile Text Customization,) so that I know which group of code is used to achieve each technique.
- Finally paste the code in the CSS window and save.
Now go take a look at your site on your mobile device...And, voila! You have banished those pesky unwanted text breaks and hyphens in mobile for good!
Having trouble or looking for another CSS tip or trick? Give us a shout and we will give you a hand!