Squarespace is amazing. I mean that. I’ve kissed a lot of website platform shaped frogs before I settled on Squarespace for my own and clients websites. It’s beautiful, easy to use and has a gorgeous responsive design.

When it comes to editing that mobile site, it can be a little tricky. There are some edits you can do for the mobile site via the Style Editor, but it is a little restricted.

The nature of web design is that the desktop design looks drop dead gorgeous. But the mobile site can a little clunky.

A big proportion of visitors now come from mobile. So it makes sense to prioritise the mobile design and make it captivating for mobile users.

Thanks to some handy hacks and CSS tricks, you can customise your mobile site in no time. So today I’m going to share my most commonly used hacks and code snippets to edit and customise my clients websites.

1. Spacers

Ah, spacer blocks. The most underrated block in Squarespace and my absolute favourite. I even wrote a full blog post dedicated to them. Yup, I love em that much.

You see, these little blocks are going to be your best and easiest tool for creating a site that looks gorg on a desktop and mobile.

If you’re new to Squarespace, then you might have noticed that, whilst you’ve used your spacer block to create some lovely negative space on your desktop design, when it comes to your mobile one there just seems way too much. You know, the whole page is filled with negative space and it’s starting to look a little, well, empty?

Fear not, in a couple of clicks that can be rectified.

THE RULES

Now, onto the rules of a spacer block. When using spacer blocks on Squarespace, they may alter when your site switches to mobile.

Spacer block + [content] = [content]

The content will appear on mobile. For the example below, the button will appear on mobile.

Spacer+Block+Squarespace+_+Eleanor+Stones.png

Spacer block = spacer block

The spacer block will appear on mobile.

Spacer+Block+Squarespace+_+Eleanor+Stones (1).png

Spacer block + Spacer block = cancelled out

Neither will appear on mobile, content will be moved up. The perfect solution!

Spacer+Block+Squarespace+_+Eleanor+Stones (2).png

2. Change Font Sizes

Squarespace will automatically resize your fonts to suit mobile view. Sometimes this is perfectly fine, other times the headings might be a little off. You know, too big, too small. So, I’ve come up with a handy CSS trick which I use in nearly every website I work on.

This one is a CSS code hack. It’s not as scary as it might sound, promise! Just head into your Squarespace site, go to Design > Custom CSS and paste in this code:

@media screen and (max-width: 641px) { 
body {font-size: 11pt} 
h1 {font-size: 28pt} 
h2 {font-size: 20pt} 
h3 {font-size: 12pt} }

Sometimes, you might want to change things like the line height or letter spacing. To make changes, just copy and paste the CSS below. Just change out the numbers to suit your style. Make sure not to change the ; and { because these are essential for the code to work.

@media screen and (max-width: 641px) {
body { font-size: 11pt;
letter-spacing: 20px;
line-height: 20px; } }

3. Stop Hyphens

Ever looked at your mobile design only to start tearing your hair out over the number of hyphens peppering your headings?

Well, here’s another quick CSS hack to combat the hyphens.

Just head into your Squarespace site, go to Design > Custom CSS and paste in this code.

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

That’s just for 7.0 - the Squarespace wizards got rid of hyphens in 7.1!

4. Image Focus

For my final trick, we’re dropping the code.

When you use an image, or a background or thumbnail image on your website, Squarespace might automatically crop it when you take a look on mobile. By default, Squarespace crops an image around the centre of your image. But sometimes, this ins’t the juiciest part of the image.

Sometimes, when you use a background image on an index page, the image might compete with any text you’ve used on the section. To solve this, we just need to adjust the focal point of your image.

When you open the image settings for an image or background, you’ll notice a small circle on the screen. This is the focal point of the image.

You can click and drag this focal point to where you want it to be on the image. This tells Squarespace that this is the main focus of the image. Once you’ve found the sweet spot, just hit save!

What’s your favourite mobile hack on Squarespace? Let me know in the comments below!

Featured