Improve your Squarespace website's mobile version
Note 1: Squarespace has a built-in mobile view in both versions 7.0 and 7.1, so you can see how your website will look on a mobile device. However, every type of phone has a different screen resolution, so what Squarespace shows you won’t look exactly the same on every mobile phone. Think of it as a good indication.
Note 2: CSS is discussed below. To work with CSS in Squarespace, you need the Business Plan. This is not possible with the Personal Plan.
Tip 1. Mobile Navigation
View the mobile navigation for your phone using the mobile view in Squarespace.
SQS 7.0 > Brine
In Site Styles (under Design > Site Styles), you have various options for customizing your mobile design. Type “mobile” into the search field at the top, and all the mobile settings you can customize will appear.
For example:
the color of the text
the background color
the color of the menu icon
the shape of the menu icon
SQS 7.1
Unfortunately, Site Styles has been removed in this version. Instead, Fonts and Colors have returned. This version does not (yet) include options to customize your mobile menu. Squarespace decides what’s best for you. However, you can choose a color theme for your mobile navigation.
Tip 2. Removing whitespace in navigation
In your mobile navigation, remove the extra white space between your primary and secondary navigation.
SQS 7.0 > Brine
If you only use the primary navigation, this won't be an issue. However, if you have your logo in the center of your navigation bar on the desktop version, the elements to the left of your logo will most likely appear in your primary navigation, and the elements to the right of the logo will appear in your secondary navigation.
In mobile navigation, there is a gap between these two. To fix this, you can use the following code:
/*verwijder ruimte nav tussen primary & seconday navigation op mobiel*/ .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0 !important; }
SQS 7.1
Primary and secondary navigation have been removed in version 7.1.
Tip 3. Font sizes
Use CSS to adjust the font sizes for your H1, H2, H3, and body text.
SQS 7.0 > Brine
Squarespace tends to display H3 text larger than H2 text on mobile devices. You can customize this yourself using CSS. Copy and paste this code into your CSS field (Design > CSS), remove the code for the headings you don't want to change, and adjust the number of pixels to your desired font size.
@media only screen and (max-width: 640px) {h1 { font-size: 45px !important; }} @media only screen and (max-width: 640px) {h2 { font-size: 35px !important; }} @media only screen and (max-width: 640px) {h3 { font-size: 25px !important; }}
For more codes to adjust text sizes, see this blog post.
SQS 7.1
In Design > Fonts, Squarespace uses rem by default instead of pixels. In a nutshell, working with rem is more user-friendly. A browser often uses a default setting for displaying the base font (e.g., 16px), but users can adjust this themselves (to 20px, for example). If you work with px in Squarespace, the text will remain 16px for the user. If you use rem, the text will scale to 20px. When using rem, your other text will scale neatly according to the ratio you’ve set.
Read more about pixels and rem (and em) in this article.
Code for adjusting font sizes in version 7.1 will be provided later.
Tip 4. Enable AMP
If you have a blog, you might want to consider enabling AMP.
SQS 7.0 & 7.1
AMP is a kind of stripped-down version of your blog posts. This makes them load faster. And Google loves a faster website. So this helps your SEO. Enabling AMP will change the appearance of your blog posts—even if they’re beautifully formatted—so you’ll need to decide which is more important to you. AMP is turned off by default, but you can enable it via Settings > Blogging > Accelerated Mobile Pages.
Read more about AMP here.
Tip 5. Logo size
SQS 7.0 > Brine
Your logo may appear very small on mobile devices. With this code, you can set the size at which your logo appears on mobile devices:
(Of course, change the number of pixels to the desired size.)
/* Logo voor mobiel groter */ .Mobile-bar-branding-logo { width: 200px; }
SQS 7.1
In 7.1, you don't need to write any code to adjust the size of your logo for mobile. You can set the size by going to: Edit Site Header > Site Title & Logo > Mobile Logo Max Height.
Tip 6. Make the buttons the same width
If you've created a page for all the Instagram links you include in your Instagram bio (instead of a Linktree page), you'll likely run into buttons that are all different widths. You can use code to make all the buttons on a page the same width.
SQS 7.0 & 7.1
Place the following code in your page's header injection (in your page's Settings, under the Advanced tab).
<style> .sqs-block-button-element--small {width: 280px !important;} </style>
You can adjust the width of the buttons by changing the number in the code. In my opinion, 280 pixels looks best on mobile.
Important: Check which "size" of buttons you're using on your IG page. If you're using "medium" buttons, change "small" to "medium" in the code above. And for "large".... you get the idea.
Tip 7. Add a search function
Just because you've added a search function to your desktop version doesn't mean the mobile version of your website has it too. Here's how to add it:
SQS 7.0 > Brine
Go to Design > Site Styles > Mobile: search icon
Here you can set where you want the icon to appear in the navigation.
SQS 7.1
Not possible at this time.
