CSS customisations - 1

These CSS customisations work with Squarespace 7.1

Squarespace is a really awesome website builder tool right out of the box. In my opinion the best looking, easiest to use, best integrations.. blah blah blah, I’m a fan boy.

However, now and again you come up against things you would like to do that can’t be achieved with the standard Squarespace widgets and settings.

Thankfully, Squarespace do allow you to add bits of CSS code to your site to create custom enhancements and best of all you don’t have to be a coder to do it, just a copy and paster.

Squarespace web designer tips - side menu

These are my 3 fave Squarespace CSS hacks

Just copy and paste these bits of CSS Code on the Custom CSS section under the Design section.

1. Stopping hyphenation

Hyphenation never really looks good, but can be an issue especially on the mobile view of your site when large words in headlines break in two and it looks terrible.

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

2. Changing the width and colour of the standard Squarespace line divider

The standard squarespace line divider block is great for most applications, basically a 1pt line in a mid grey. See below

But sometimes you want a chunkier look or a different colour to match the brand.

Amend the code below by adding your own hex colour (currently #fdbb11) and height (currently 4px). You can also adjust the margins a little.

Note: when editing code be sure you don’t delete any of the semi colons or brackets , they all count.

/* Line Divider */
.sqs-block-horizontalrule hr {
background-color: #fdbb11;
height: 4px;
margin-top: 0px;
margin-bottom: 0px;
}

3. Adjusting mobile font sizes

Squarespace is totally mobile responsive and reformats and sizes the fonts to work on mobile, but sometimes you want to make size adjustment tweaks to suit your content.

/* Mobile font sizes */
@media screen and (max-width: 641px) {
body {font-size: 11pt !important;}
h1 {font-size: 25pt !important;}
h2 {font-size: 13pt !important;}
h3 {font-size: 16pt !important;}
}

Adjust the font-size pt value to work for your design on mobile.

That’s my Top 3 that I mostly do on every job, but there are many more. So get tweaking with CSS and get your site looking the way you want.