3 mobile design hacks for Squarespace
Squarespace is freakin’ awesome (if you didn’t know, we're huge Squarespace fans over here) 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 adjust my mobile site on Squarespace.
Important note! Since Squarespace released it's newer version (Squarespace 7.1) and their interface is quite different, there are some tweaks that only work in Squarespace 7.0 and some that only work in Squarespace 7.1! So to fully understand this post, it's important that you know which version of Squarespace you are using.
Mobile design hack 1.1: Using spacers
For Squarespace 7.0 only:
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. You've got it looking great on the desktop view, but when you look at it on mobile, it’s just waaay too much space.
Solved: For each one full-width spacer that you use, instead, use two spacers and put them (by clicking + 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!
Alternatively, you can use the flip-side of this trick by using lots of spacers to create tons of space on mobile. The only issue with this is that it’s not exactly opposite, because using lots of spacers will show on desktop and mobile. But it’s still good to know, and can be a really effective technique.
Mobile design hack 1.2: Using the section-height settings
For Squarespace 7.1 only:
So this is basically a different version of the hack above, but for Squarespace 7.1. It’s not quite as good, I’ll be honest, but it’s the closest option we’ve got to adjust the spacing on the mobile site.
Problem: It tackles a similar same problem as above: too much spacing, or not enough spacing. Though in this case it’s spacing between the top and bottom of sections, unfortunately it doesn’t apply to inside sections in-between elements like spacers do.
Solved: Use the section height settings to adjust the size of sections on mobile.
The section height settings generally add padding to the top of bottom of a section. This can look great on desktop, but sometimes it’s way too much padding on mobile. If this is the case, then reduce the section height settings which will reduce it on mobile and desktop. Then, you can fake padding by putting a spacer in the top and bottom of the section. This works because spacers do not show (at all!) on mobile on 7.1 websites. So wherever you put a spacer on desktop it will disappear on mobile.
Example:
I like how this section on my website looks on desktop with the height currently set to LARGE:
But because it’s set to LARGE, the section on mobile has way too much padding and looks silly:
So, I will change the section height to SMALL and add spacers top and bottom (in this case I did one one top and two on the bottom because it worked well with the design)
Then the mobile site will be set to small, and because the spacers disappear on mobile, the section looks much better with less padding:
What I want you to takeaway from this one is to try to use a combination of the Section Height settings and the spacers to make your spacing look good on both desktop and mobile, sometimes it takes a bit of playing around!
Just remember that:
Section height shows on desktop and mobile
Spacers show only on desktop, not on mobile
Mobile design hack 2: Using the focal point
Note: This hack works for Squarespace 7.0 and 7.1!
Problem 1: Your background section image has been cropped on the mobile view and isn’t displaying the most important part of the image.
Problem 2: You have a background section image with text over top, and on the mobile view the text is hard to read because the background has been positioned right underneath the text whereas on desktop the alignment is fine and the text is readable.
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".
You’ll find the focal point in the same place where you upload your image, and every image has this focal point option. In this case, this is a banner image so,
in Squarespace 7.0: you’d find this in you index page settings > Media
in Squarespace 7.1: you’d find this in your page section settings > Background
You can click and drag this focal point anywhere you want on the image, and this will indicate which part f the image is important, or which part you want to be “in focus”.
If you are trying to focus on a particular part of the image on mobile, then move the focal point there.
If you are trying to avoid background color/image behind text on mobile, then move the focal point to the part that will look good behind the text on mobile.
Example continued:
As you can see above, currently my focal point is in the top-middle, so it will show up like this on mobile:
If I moved the focal point all the way to the bottom-left, like this:
It will show up on mobile like this:
Simple, right? By using the focal point, you can change where the image is cropped on mobile!
Mobile design hack 3: Adjusting the styles of your fonts with some code
Note: This hack works for Squarespace 7.0 and 7.1!
This is something that Squarespace tried to do automatically, but 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, you just need to change the font-size number. If you don't want to change one, just remove the whole line. 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!
Liked this post? Pin it to Pinterest! 👇
