How to Make Your Squarespace Website More Attractive on Mobile

May 21

Does your Squarespace website look cramped on mobile? Here’s a common problem of DIY design on Squarespace: It’s a desktop-first app; you design your website on desktop and forget to look at the mobile version. Squarespace automatically generates the mobile version by stacking all elements and sections on top of each other on mobile. All default blocks are supposed to look good on mobile, however, if the style settings are not applied correctly, it’s easy to create a web page that’s overstuffed and looks crowded.

Below we are sharing some tips on how to avoid the problem:

Adjust the font sizes, line height and letter spacing on mobile and tablet on your Squarespace website

You can adjust how fonts show up on mobile and tablet, including the size, line-height and letter spacing. Add the following CSS to the Custom CSS section in the design tab.

Add h2, h3 and h4 inside the media query brackets. Squarespace uses three sizes for paragraphs, so that’s “p”,” p.sqsrte-small”, “p.sqsrte-large” respectively.

Change the values for “font-size”, “letter-spacing” and “line-height”. Don’t forget to wrap your values in the media query to adjust the screen size where they will apply!

// Adjusting fonts on mobile
// Screens smaller than 1100 px

@media only screen and (max-width: 1100px) {
   h1 {
    font-size: 50px !important;
    letter-spacing: 0.07em;
    line-height: 1.5em;
   }

}

// Screens smaller than 900 px
@media only screen and (max-width: 900px) {
   h1 { font-size: 40px !important; }
}

// Screens smaller than 640 px
@media only screen and (max-width: 640px) {
  h1 { font-size: 35px !important;}
   p.sqsrte-large {font-size: 22px !important;}
  p {font-size: 22px !important;}
   p.sqsrte-small {font-size: 22px !important;

  }

Let’s say you’d like to apply the new sizes only to one section of your website. Wrap whole code in curly brackets and add a section ID before the opening bracket. To quickly grab a section ID, install a handy Chrome extension that lets you do that without digging the inspector. Learn how to find a section ID in the Step 4 of this tutorial.

Here’s what the final result would look like:

// Screens smaller than 640 px
section[data-section-id="609d09582c8a3b795018ae62"] {
@media only screen and (max-width: 640px) {
  h1 { font-size: 35px !important;}
  }}

Adjust the background image focal point

On mobile, Squarespace 7.1 sections use the same width and height settings that are configured on desktop. It creates a potential problem with mobile design: A section is landscape on desktop and if we set the height to 100% it turns into portrait on mobile. The horizontal image won’t work on a vertical mobile screen.

Thankfully, we can adjust the focal point on mobile - choose which area you’d like to show on mobile. It doesn’t solve the problem completely, but it lets us create an artsy collage effect in the design.

Here’s a hero area of Katya Vilchyk website. We use a collaged background to compliment the collage image block and create a fluid composition:

See how we adjusted the focal point on mobile to make the green area span the whole width of the mobile screen:

Leverage premade image layouts more

Common mistake: don’t use spacers to create complex layouts. Use spacers if you need the simplest, the easiest thing - for example, several columns.

Chances are, if you add columns upon columns with spacers, text blocks and images, the design won’t look so good on mobile.

Instead, use pre-made image layouts that are designed to look consistent on mobile devices.

Image layouts are a secret weapon of Squarespace - you can use them to create alternating designs. Plan your design around these image blocks and you won’t have to worry about mobile design.

That’s one of the things I am teaching in my Squarespace Mastery course - build your design around Squarespace constraints and not against them. Inside the course, I will give you a template system for Squarespace to equip you with knowledge on how to create mobile-friendly layouts without frustration.

Adjust the section width and height

Squarespace 7.1 hides all spacers on mobile! It can be a reason why your design breaks.

So let’s use this constraint as a hack! We know that Squarespace applies section width and height to both mobile and desktop. So let’s use these controls to apply design that we want on mobile and use spacers to add more space on desktop.

For example, set the section height to 10%. Add the missing white space at the top and at the button of the section with spacers on desktop. On mobile, Squarespace hides the spacers and you’re left with a section that’s the same width as your content.

Browse the default template library for layout inspiration

Before you sit down to design your website, browse Squarespace free templates for layout inspiration. You’ll notice that all these default designs are really simple, not to say simplistic.

The power of Squarespace is in its simplicity. See how SqSp designers use the default blocks - it looks so easy and effortless! This is the best case study to see how they wanted the blocks to be used.

In Squarespace 7.1, all templates use the same functionality - you can recreate all these layouts on your site with ease! Study the default layouts and reuse them intentionally!

Hope you enjoyed these short tutorials! Check out our shop from your mobile, to see these tips in action.

Have questions about Squarespace and web design? We’re pretty active on Instagram. Send us a DM or send us an email via a Contact form.

Happy creating!