Three Reasons Why the Spacer Block is Your Best Friend

SpacerBlock for Mobile Friendly Squarespace Layouts.png

The seemingly simple spacer block is one of the best things in Squarespace. And to be honest, it’s because of how it is built to react on mobile. So let’s discuss some of the BEST ways to use the spacer block in your designs.

Key things to understand about the spacer block on Squarespace.

On Mobile —> (squarespace default is 640px)

  • SPACER + X = X

  • SPACER ALONE = SPACER

Which means —> You can use them to create desktop designs, and reactively also create mobile layouts by using single and “double” spacers or spacer + x. Understanding this concept is THE KEY to getting great results on mobile - after our RULE #1 (see blog post here on our #1 Rule for mobile design on squarespace).


ONE: Spacers around text-block.

It is incredibly important to use spacers to create dynamic paragraphs. Using content inset or the return key-stroke to break the line is irresponsible when it comes to design because of the lack of control and responsive state within your site. You will see below, that we are using spacers on either side of the paragraph so that as it compresses and changes widths it stays one paragraph, no breaks.

Screen Shot 2019-07-08 at 7.04.19 PM.png

Screen Shot 2019-07-08 at 7.03.20 PM.png

TWO: Spacers around a carousel block.

This is a trick I see almost 100% of students before taking one of my workshops have issues with. They are using image blocks for logos that are centered in the footer, and it’s frustrating since the logo is GINORMOUS (aka - the full width of your phone).

You can use this anywhere you want the carousel block centered (above it’s in the top section of my own website. The key is you make the width of the carousel gallery block the width you want it on mobile.

Keep in mind if you don’t want the logo to be the width of the mobile screen you want to do:

<spacer> < carousel > <spacer>

What you get as seen below with the screenshot is that the width of your mobile screen would be the width of ONE column of content. So your gallery here then ends up that width, including that extra space, giving you the ability to adjust the size of the logo on mobile, without adjusting anything on desktop for final view. Just adjust the spacers with the gallery so that both mobile and desktop look good.


Screen Shot 2019-07-08 at 7.20.09 PM.png

do not do this:

<spacer><carousel><spacer>

Although the example below looks like it would be the exact same, the difference is the width of that center gallery block and the space around it. This version, you would get a centered icon that fills the mobile screen left to right.

Screen Shot 2019-07-08 at 7.03.57 PM.png

THREE: Spacers to create banner height.

Ok so, are you ever frustrated with banners on mobile? Ya??? Well, the key is to use a combo of one spacer and two spacers. The key is that the one spacer will stick on mobile (the same ratio) and the row with two disappears. So you you need more height on mobile you increase the single, and decrease the double just as much to keep the banner the same on desktop but adjust mobile only. PERDY cool eh?


 

I am sure there are quite a few more great ways to incorporate the spacer block to create a responsive and dynamic design.

What’s your favorite way to use the spacer block??

— xoxo Meg Summerfield