3 Mobile Design Hacks for Squarespace

 
 
 


Squarespace is freakin’ awesome (if you didn’t know, I’m a huge Squarespace fan) and it’s especially awesome because it practically creates a whole mobile optimized site for you, so you don’t really have to worry about doing any of that.

The one downside to this is that it doesn’t give you much mobile customization. Because it does it all for you, it doesn’t give you many options to specifically edit the mobile site. There are some edits you can do for the mobile site via the Style Editor, just not many.

So, I thought I would share with you my most commonly used hacks and tweaks that I use to edit my mobile site on Squarespace.

 

HACK #1: Spacers

Problem: Have you ever noticed when you’re looking at your mobile site and there’s just so much space in between elements? This might be because you've used spacers. Maybe you’ve used a few spacers stacked on top of each other, or even just one spacer. It looks great on the desktop view, but when you look at it on mobile, it’s just way too much space.

Solved: For each one spacer that you use, instead use two spacers and put them (by dragging them) side by side. When you put two spacers side by side, Squarespace will cancel out both spacers on the mobile site. So by using this trick, you can have a large space on your desktop view, and you can completely cancel the space out on the mobile view.

Example:

If you use one spacer like this, the space will show up on desktop and mobile:

If you use two spacers side by side, it will completely cancel out the space on mobile and only display on desktop:

Love this trick!

 

HACK 2: Focal Point

Problem: You have an image, or a background or thumbnail image, that has been cropped on the mobile view and isn’t displaying the most important part of the image. Or, you have used Index pages with background images and text over top, on the mobile view the text is hard to read because the background has been positioned right underneath the text.

Solved: Use the Focal Point to set the position of where images will crop on mobile!

Example:

This is currently the banner image for my homepage and I have put a box around the "focal point":

 
Mobile Design Tricks Squarespace3-min.png
 

You can click and drag this focal point anywhere you want on the image, and this will indicate which part you want to NOT be cropped out, or, which part will be the main focus of the image when cropped.

Currently my focal point is in the top-middle, so it will show up like this on mobile:
 

 
Mobile Design Tricks Squarespace1-min.PNG
 


If I moved the focal point all the way to the bottom-left, like this:

 
 

It will show up on mobile like this:

 
 

By using the focal point, you can change where the image is cropped on mobile!

 

HACK 3: Adjusting the styles of your fonts

This is something that Squarespace does automatically. I find that sometimes the way Squarespace adapts the fonts for mobile is absolutely fine, but other times the headings are too big, too small, or they have lost specific formatting like letter spacing or the body text is too big or too small.

So I created this super easy code so you can adjust all of that!

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: 13pt}
h2 {font-size: 13pt}
h3 {font-size: 16pt}
}
 

With this code you can quite easily see that you can adjust the size of the body, h1, h2 and h3 fonts for mobile. If you don't want to change one, just remove the whole line. You just need to change the font-size number. You can also add other font characteristics in here too, like,

 

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

}

 

When you’re adding different characteristics, make sure to add the semicolons after each characteristic (as I have above) and don’t delete the curly brackets, or you may break the code!

Feel free to experiment with these styles, remember they will only show on mobile view!

 

What are your favorite Squarespace mobile design tricks? Let me know in the comments!

 
 

Related Posts