Remove space block minimum height on Squarespace

Blocks

Aug 25

Despite Fluid Engine being the star of the Squarespace show at the moment, there are still plenty of use cases for the classic editor.

One of the cornerstones of the classic editor is the spacer block, allowing designers to get the exact layout and design they want without having to switch to Fluid Engine and use the drag and drop.

The one downside to spacer blocks however is that despite being able to make the height of them as tall as you want, you can’t make the height as small as you want. Squarespace has a minimum height for spacer blocks.

The good news is, there is a way to remove the minimum height for spacer blocks…

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

Once you’ve added your spacer block to the webpage within your classic editor, head to Website > Website Tools > Custom CSS and add the following code to your CSS panel:

.sqs-block-spacer {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0vh !important;
}

This code targets the spacer blocks and tells Squarespace there’s no padding at the top or bottom and most importantly, no minimum height.

Hit save and if you can now head back to the section where you’ve added your spacer block and you’ll be able to alter the height of your spacer block to be as small as you want.

This is a great trick to have up your sleeve as you never know when you might want just a small slither of space within your Squarespace design.

Have a play around with spacer blocks and see which height you think works best for your specific layouts!