How to Customize Squarespace on Mobile Screens

squarespace design

Nov 26

One of the reasons I love Squarespace (and prefer it over other platforms like SHOWIT and Wix) is that it’s mobile-responsive. That means your full-width website will automatically adjust to fit any screen size.

Just because it fits doesn’t mean it looks amazing though. That’s where mobile queries come in. Whenever I design a website for a client, I look at their website at smartphone and tablet width and make adjustments to make sure their site looks perfect on every device.

In this post, I’ll give you the CSS you need to make changes to Squarespace on mobile along with ideas to get you thinking about how mobile edits can make your site more user-friendly for visitors on the go.

Ready? Let’s get started…

The Basics of CSS Media Queries

Before I give you the code you’ll need to make your first mobile edit, let’s talk about breakpoints. A mobile breakpoint is the width (in pixels) at which the website changes to fit smaller screen sizes. The truth is that there are no standard mobile breakpoints, at least not anymore. Mobile devices come in many different sizes. All you can do it test your site on as many different screens as possible and adjust your CSS accordingly.

That said, I typically find that two mobile breakpoints cover most of my bases: 640px for smartphones and 1024px for tablets. I make finer adjustments if necessary but 90% of my edits use these breakpoints.

With that out of the way, here’s the basic code we’ll be using:

@media screen and (max-width: 640px) {
}

Let’s pick this apart.

This query says that any changes added within the curly brackets will only apply to screens with a maximum width of 640px, i.e. most smartphones.

Let’s change it up a bit.

@media screen and (max-width: 1024px) {
}

This snippet says that any changes will only apply to screens with a maximum width of 1024px, i.e. most tablets.

Now, let’s try something different.

@media screen and (min-width: 641px) {
}

Here, I’ve changed max-width to min-width and increased the value to one pixel above the smartphone breakpoint. That means that the changes will only apply to screens bigger than 640px wide.

Get the idea?

You’re probably wondering how you can apply this code in a practical way, so here’s an example from my own website.

On my homepage, I have a section where I showcase some websites from my portfolio. For this section, I used a simple Gallery Grid.

I love how this section looks on a desktop screen but on mobile, it’s a different story.

I want my website to look as good on a smartphone screen as it does on a full-sized computer, so I changed things up a bit. Here’s what it looks like now:

So much better, right?

Achieving this look was actually pretty simple. Instead of trying to do CSS gymnastics to force the gallery block to look the way I want it to on mobile, I simply replaced it. I added another gallery block below the first one containing only two images and below that, I added a single image block. Then, I wrote my rules.

@media screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1554894449286_138860 {
  display: none;
  }
}

@media screen and (min-width: 641px) {
  #block-yui_3_17_2_1_1555001480077_19465, #block-yui_3_17_2_1_1555001480077_23150 {
display: none;
  }
}

@media screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1555001480077_23150 {
margin-top: -35px;
  }
}

Let’s unpack this.

In the first snippet, I identify the three-image Gallery Block by its block ID and tell it to hide on mobile screens.

In the second snippet, I identify the two-image Gallery Block and the image block underneath it and tell them to hide on desktop and tablet screens.

In the third snippet, I adjust the top margin of the image block so it’s the same as the margin between the two Gallery Block images. The result is that the three images look like a cohesive unit.

The three-image Gallery only shows up on desktop and tablet screens. The two-image Gallery with the single image underneath it only shows up on smartphone screens. And it took less than five minutes to setup.

Other Ways to Use Media Queries

There are lots of ways you can use media queries to edit your mobile site. Here are some ideas:

Change padding and margins between elements and links to make it easier for mobile users to read text and click links on small screens. This is how I use mobile queries 95% of the time.
Change the alignment of text using the text-align property. Here’s an example where I wanted to align the heading of a specific block center on mobile only.

@media screen and (max-width: 640px) {
#BLOCKID h1 {
  text-align: center;
}
}

Change your site logo on mobile. This is great if your logo has small text that’s hard to read on small screens. I’ll have a tutorial on how to do this coming soon!

There’s more to Squarespace on Mobile

There’s more to mobile edits than mobile queries. For example, I have a whole guide on how to style your mobile navigation on the Brine template using CSS. Try it out and have fun taking your Squarespace website to the next level for mobile users!

Did you find this tutorial helpful? You can leave a tip to say thanks!