4 Essential CSS tweaks for your Squarespace website
Here are 4 of our favourite “simple” Squarespace CSS code snippets.
These were tested on Brine 7.0, but may very well work on other templates too.
Squarespace is popular for being one of the easiest to use website builders available, and that’s why we recommend it to all types of business owners. As well as beautifully designed website templates, Squarespace’s built-in style CSS editor offers the ability to customise fonts, colours, layout and more—no advanced coding knowledge required!
In this blog we will share some of the CSS modifications that we use on almost every website we build. These are easy additions that make a great site even better. Enjoy!
1. Adjust mobile font size
One of the great things about Squarespace is how easy they make it to build a website that looks great on mobile. Their website builder automatically adjusts things like images and text and 99% of the time it’s perfect. However sometimes you may want to customise how your fonts appear. So we’ve created this super easy code so you can adjust how the fonts are displayed on mobile.
Just head into your Squarespace site, go to DESIGN > CUSTOM CSS and paste in this code:
/*-- MOBILE TEXT SIZE --*\
@media only screen and (max-width: 640px) { h1 { font-size: 45px !important; }}
@media only screen and (max-width: 640px) { h2 { font-size: 36px !important; }}
@media only screen and (max-width: 640px) { h3 { font-size: 18px !important; }}
@media only screen and (max-width: 640px) { body { font-size: 12px !important; }}
(You can adjust the screen width & font size to suit your own style)
2. Remove Hyphens in text
This one is a really common problem. You finally get your website text to look awesome on desktop, but the second you view it on a mobile device, you have hyphens creating unwanted word breaks all over the place. Sound familiar?
Go to DESIGN > CUSTOM CSS and add the following code:
/*-- REMOVE HYPHENS --*\
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important; }
3. Change index section background colour
This is one of our favourite Squarespace tips for creating colourful, engaging websites.
When you create a page within an index, that page is given an ID. So if you name the page (section) "Section 1" the ID will be "section-1".
Go to DESIGN > CUSTOM CSS and add the following code with your section ID:
/*-- INDEX BACKGROUND COLOR --*\
#section-1 {background-color: hsl(160, 60%, 50%); }
4. Split footer into 2 colour blocks
Normally however Squarespace footers are just one color. If you would like to split it into two colours here's how to do it.
(Note, this works on desktop and will revert to the normal color on a mobile screen).
Go to DESIGN > CUSTOM CSS and add the following code:
/*-- FOOTER TOP COLOUR --*\
@media all and (min-width:640px) {
.Footer-inner { max-width: 100%!important; padding: 0 0;
.Footer-blocks--top { background: hsl(160, 60%, 50%) !important;} } }
