Squarespace CSS Tweaks: The Spacer Block

One of the many great things about Squarespace is the ability to change the default way that things look and behave. Using CSS, we have either high level, or even much more specific and granular control, over many of the aspects of our website design and functionality.

Today, I want to briefly describe a simple, yet infinitely useful CSS tweak to the Spacer Block (Jump to the tweak).

VIEW OTHER POSTS IN THIS SERIES

What is the Spacer Block?

The spacer block is a specific Squarespace block unique to the old Squarespace 7.0 platform as well as the Classic Editor in Squarespace 7.1. It’s basically as it sounds: an empty space.

And if you don’t know the difference between the two sections, check out this block post.

How is the Spacer Block Used?

The Spacer block has three main functions.

1. To add vertical space (seems obvious, right?)

2. To add horizontal space (again, duh!)

3. To force blocks below existing blocks (wait…what?)

Adding Vertical Space with the Spacer Block

This one seems fairly obvious, but just in case you’re still new to Squarespace, let’s talk about it!

The spacer block can be placed above or below another Squarespace block to add vertical space. White space is important to help keep your website visitors focused on the content you want them to see, and it’s visually appealing and calming. So using the Spacer block, you can add and even stretch a little vertical space between other blocks.

The great thing about this is that it can be used in the full-width of the section, or you can add it to any columns you’ve created with your blocks.

Adding Horizontal Space with the Spacer Block

This one seems obvious, again, but let’s briefly discuss it.

Using the Spacer block, you can drop it between your blocks horizontally. Then the spacer block can be stretched out to increase the space between the adjacent blocks. Super helpful, right!

But another main use of the spacer block—one that I’ll admit that I didn’t catch on at first when I started designing websites in Squarespace—is the ability to reduce the size of images.

Larger images will simply fill in all the available horizontal space, if they’re big enough. But some images would DOMINATE the page if allowed to do that, It would be tacky, and cause the website visitor to scroll a lot to get the rest of the content. So placing a spacer block next to an image shrinks it down. You can even add spacers on either side, then adjust their width to control how wide the image is. Very handy. If you look closely at the image example image below, you can barely see the outline of the spacers to the left of the Facebook logo and to the right of the YouTube logo, forcing the two logos to be smaller and right next to each other.

Just be forewarned that on mobile, spacers used in this way will be removed and the image will now be full-width. There’s CSS hacks around this, but it may be desired on the smaller mobile screens.

Forcing blocks below existing blocks with the Spacer Block

This one may be a little bit less widely used, but still a great tool when needed.

So, the web is responsive to screen size. That’s on purpose, because anticipating the exact size of anyone’s screen and making a website for each of those sizes is impossible. There’s just too many!

So a screen is basically a container that the website gets “poured” into, like a glass of water. It’s not a perfect analogy, but for this illustration, it works, so stay with me. And if the screen size is too small for things, they get wrapped to the next line.

But on larger screens, sometimes you can have multiple blocks side-by-side, but you are ready to start a new area of content that doesn’t need to fit in the smaller horizontal space below a block that only takes up a portion of the width of the screen.

Your option here is to use one of two blocks: the horizontal line block, or the spacer block. You can force the spacer (or horizontal line) to fill up the width, and therefore any blocks below it won’t get shoved into the horizontal space below the blocks above. The spacer acts as a “barrier” of sorts to keep different areas of content separate.

That may have been difficult to follow, so in the image below, you can see (barely, if you look closely) the faint outline of the spacer block. If that spacer block weren’t there, the text block with “If you would like to request prayer..” might have been forced in the space below the Church Email but only allowed to take up the width of that block. Or it might have been forced in the space below the “To contact one of our Pastors…” text block, but again, only allowed to take up the horizontal space below that block only. But the spacer adds a barrier, forcing the blocks below up to stay in their space, and therefore be allowed to take the entire horizontal space.

Notice I didn’t say section here, so as not to confuse with a new Squarespace Section.

What about the amazing CSS Tweak?

For some reason, Squarespace has predetermined the default minimum height of the Spacer block, and it can’t be changed within a Squarespace setting. I’m not sure why they’ve done it this way, but it’s universal. But I discovered a simple CSS tweak that gets rid of the minimum height:

/* MINIMUM HEIGHT SPACER BLOCK */
.sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content {
    min-height: 0px !important;
}
.sqs-block-spacer .sqs-block-content {
  height: 0;
}
.sqs-block-spacer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

Go ahead and copy/paste this code and place it in your Custom CSS area. I use it on EVERY Squarespace site I design.

Why would I want this?

As stated above, sometimes you just need a tiny bit of vertical space. Or you’re just using it like the third example above, where you’re just creating a barrier for the rest of the blocks, but you don’t want too much vertical space. That’s where this really shines.

If you haven’t made a lot of pages/sites, then this may not seem useful. But once you realize how helpful it is, you’ll use it in every Squarespace site you build…at least until they get rid of the Classic Sections (I personally hope they never do).

In Short…

Copy and past the above code and place it in the Custom CSS area. It allows you to create a spacer block with no minimum height requirement. It’s super-effective! You’re welcome.

—Daniel

Was this helpful?

Do you think this tweak is dumb? Or did it save you a bunch of stress? Any other spacer block tweaks you have to share? Just leave a comment at the bottom of the page! 👇