3 CSS Tweaks I Make on Every Squarespace Site

3-css-tweaks-i-make-on-every-squarespace-site-amber-ladd.png
 

It’s safe to say I spend majority of my time loitering around the back end of websites, inspecting code and writing my way into different layouts and functions. Over the last three years, I’ve built a strong understanding of the way the Squarespace platform works, the capabilities of its built-in features work, and how I can customise them to reflect my own unique designs.

With each client I work for, I always develop a completely custom design based on their branding that begins with a mocked-up design created in InDesign. I design without thinking about what restrictions my mind could potentially place on Squarespace and dash any ideas of what it ‘can and can’t do’, because I trust myself to be able to find a way around it through code. While every site is tailored to the unique needs and requirements of each client, there are at least three non-negotiable customisations I make to every site.

These hacks are things that would probably go unnoticed in a site as they are working in the background to keep things tidy, but they help add to the overall experience and make sure you’ve got a professional finished product. Read on to swipe the 3 CSS tweaks I make on every Squarespace site…

 

1. Disabling Left to Right Scroll

Ever been working on a site and you realise at some point in the process that your screen has started scrolling left and right, not just up and down? Yeah, it’s not ideal and definitely shouldn’t be ignored! The last thing you want is having your viewers get lost scrolling all over the place and losing their position on the page. The best way to fix this issue? It’s as simple as this:

body, html {
  overflow-x: hidden;
}

Pop this into your Custom CSS section (Design > Custom CSS) and you’ll notice that niggly horizontal scroll fix itself right before your eyes.

As a side note, should you notice down the track that you have a coloured bar appearing across the top of your screen (especially on mobile view when opening the navigation!) just jump back into the Custom CSS section and take this line of code out. It has a tendency to interfere with this function on some Squarespace templates, but you’ll notice the scroll does not return after removing it. So win-win!

 

2. Removing Hyphens from Your Text

A general design rule for anyone who takes note of keeping their typography tidy is the removal of hyphens. I can’t tell you how many times I have looked at a poster or website and seen a broken word and low-key wanted to cry (yes, I take my type seriously!). While Adobe design software has a simple and easy ‘hyphenate’ button you can toggle on and off to rectify this issue, web design works a little differently. You’ll probably notice the hyphens showing up more noticeably on your mobile sites, but if you want to make sure you’ve covered all bases, try this code:

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

This code specifically will remove the hyphens from your p (paragraph/body), h1, h2, and h3 tagged text, however if you have other heading tags (h4, h5, h6, a etc.), be sure to add these in as well and separate each by commas.

 

3. Changing the Index Page / Section Background Colour

For those who use Squarespace templates with an Index page structure built-in, you’ll know this is a handy way to make a ‘sectioned’ website design. And one of the best ways to create a distinction between sections? Coloured backgrounds!

I’ve seen many designers and Squarespace users add in coloured backgrounds by uploading a jpeg image of a block colour, and while this does get the job done, I don’t believe it to be the most efficient and ‘clean’ way of achieving the look. (For starters, your text colour on that section will revert to the ‘overlay colour’ you’ve set in the Site Styles… meaning you need to add code to change it anyway if required!).

Next time you want to change the background colour of a section, try using this code and customising to your needs:

#SectionID {
  background-color: #000000;
}

The first thing you will need to do is identity the Section ID and replace the #SectionID placeholder with this. The easiest way to do this is to go to the Pages panel in your dashboard, and navigate to the Index Page / Section you want to add the background colour to.

When you hover over that page title, you will see the icon appear which you can click to bring up the following screen. The primary area you want to focus on here is the URL Slug. The name written here is your Section ID (you will need to replace the / with a #).
Screen Shot 2019-09-12 at 9.15.31 PM copy.png
 

So using the above image as an example, your code would look like this:

#studio-intro {
  background-color: #000000;
}

The last thing to add is your HEX code (6-digit string of letters or numbers that represents a web colour) which will be the background colour of your sections. For a range of HEX colours, you can check out https://htmlcolorcodes.com.

 
 

There you have it! These are just three of the main tweaks I will make to every site I work on. They are easy, clean and simple to use, and something I recommend everyone who works with web try out.

Bit of a web wizard yourself? If so, what are your favourite non-negotiable CSS tricks you like to use?