Squarespace Custom CSS Tips for 2023 (UPDATED)

2 Jan

Written By Josh Cohen

Adding custom CSS code to your Squarespace website

Note: this guide is for Squarespace Brine Family v7.0, however works on most 7.0 and 7.1 templates

Making small changes and tweaks here and there on your Squarespace site is really simple! Different types of code (HTML, CSS and Javascript) can be added to a number of different areas of your Squarespace site to change certain attributes of blocks and content. The simplest of changes can be made by inserting CSS code into Squarespace's CSS editor.

Need to tweak your site?

Be warned though! Adding custom code to your site incorrectly can mess things up, and once you start customising your base template, Squarespace Customer Care won't provided any troubleshooting or support for these areas.

So here's our guide on how to insert CSS code in to your website. It is provided without warranty, Noughts & Ones cannot be help accountable for mistakes made as a result of incorrectly inserted CSS code. We would, of course, be more than happy to help with any issues that you are having.

What is CSS?

CSS stands for 'Cascading Style Sheets' and simply put, it is the languages used to instruct your web browser how to display the elements of a web page.

Why Use CSS?

There are a number of advantages to using CSS over other types of language, most notably:

CSS saves time
Pages load faster
Easy maintenance
Superior styling options to HTML
Multiple Device Compatibility
Global web standards
Offline Browsing
Platform Independence
Getting Started

When choosing which template to use it is important not to worry too much about what content is included in the demo site on Squarespace's template page. Your decision should be based purely on the features, structure and the overall functionality.

Before you start thinking about adding CSS to your Squarespace website you need to make sure that you have chosen the most suitable template and have carefully explored all of the styling options available to you within the Style Editor.

Where to insert CSS

On Squarespace you can insert CSS in one of two places: the CSS Editor and individual Page Header Code Injection area. The best place to start is the CSS Editor as, generally speaking, this will effect your entire site. Squarespace's CSS Editor checks the code you're inserting and highlights any errors.

To get to your CSS Editor you need to head to:

Design > Custom CSS > Insert code snippets in the main window

The Importance of “!important”

When adding CSS from various online resources and forums, it may not work straight away. The first thing to try is telling your site that this CSS code is important. This will make it a higher priority and may get your code working.

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide at the top of the page.

Adding Important

// WITHOUT IMPORTANT //
.sqs-block-spacer {
margin-top: 20px;
}

// WITH IMPORTANT //
.sqs-block-spacer {
margin-top: 20px !important;
}

If it still does not work then check for any error messages and if not then contact us here and we will be happy to help you out.

Tidying up your CSS

Adding CSS to your Squarespace site is a great way of making it your own, you can make it look unique and really put a personal touch to it. If you end up adding lots of CSS you might find it hard to navigate through all of it. Below is a little tip to help tidy up your CSS code (if you need help adding CSS to your Squarespace site please read our guide at the top of the page).

Go to the CSS section of your site (Design > Custom CSS)
Click anywhere in the CSS Box
Press Ctrl + A or Cmd + A to select all of the CSS (or drag your mouse to highlight)
Press Shift + Tab! This will put all of your CSS inline and make it easier to navigate

Adding CSS for different screen sizes

Ever been frustrated by how certain things look great on desktop and not right on smaller screens? Use the following code(s) to targets items on specific screen sizes!

Mobile CSS

@media only screen and (max-width: 767px) {
// insert CSS here for MOBILE //
}

Tablet CSS

@media only screen and (min-width : 768px) 
and (max-width : 1200px) {
// insert CSS here for TABLETS //
}

Desktop CSS

@media only screen and (min-width : 1201px){
// insert CSS here for DESKTOP //
}

Footer Logo

Wanting a smaller logo for your site when viewed on mobile? Use this code and adjust accordingly

@media screen and (max-width: 767px){
#block-XXXXX {
width: 300px;
margin:auto;
}
}

Margin and padding CSS

Adding Margin or Padding to different elements in the CSS Editor can be done in various ways. Below you find some examples on how to add Margin and Padding to a spacer block .

It's worth noting the difference between margin and padding. Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design.

Margin

// SEPARATE VALUES //
.sqs-block-spacer {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

// COMBINED VALUES //
// TOP - RIGHT - BOTTOM - LEFT // 
.sqs-block-spacer {
  margin: 0px 0px 0px 0px;
}

Padding

// SEPARATE VALUES //
.sqs-block-spacer {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

// COMBINED VALUES //
// TOP - RIGHT - BOTTOM - LEFT //
.sqs-block-spacer {
padding: 0px 0px 0px 0px;
}

Remove Squarespace Hyphenation

Turning hyphenation off site wide is one of the most common queries we see. Hyphenation can be an eyesore and poor user expereince when viewed on mobile. You can turn hyphenation off on all main classes like paragraph, H1, H2 H3 etc.. simple add the code below and add the classes you want to include or exclude.

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

If you want to turn off hyphens for mobile only simple add the @media tag as above. ie

@media only screen and (max-width: 767px) {
p, h1, h2, h3, h4 {  
-webkit-hyphens: manual !important;  
-moz-hyphens: manual !important;  
-ms-hyphens: manual !important;  
hyphens: manual !important;
}
}}