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 👇

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.

📩 Join the inner circle to get exclusive code updates

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!

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?