Reduce Squarespace Spacer Block Depth

Squarespace web designer tips - Reduce the standard Squarespace spacer black depth
 

Reduce Squarespace Spacer Block Depth

The spacer block is an essential tool to manage the layout and look of your site. The problem however, is that sometimes the default depth of a spacer block is just a bit big, when you only need just a touch more space added.

The code below allows you to reduce the depth beyond what is normally possible.

Copy and paste the below code into the Custom CSS

/* REDUCE SPACER SIZES */

/* Some flexibility in height. */
.sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content
{ min-height: 0px !important; }
.sqs-block-spacer .sqs-block-content
{ height: 0; }

/* Reduce height to almost zero. */
.sqs-block-spacer
{ padding-top: 0 !important;
padding-bottom: 1 !important;}

For those who are new to this. You can add custom CSS to Squarespace to tweak the layout and add extra functionality. No coding experience needed , just copy and paste into the Custom CSS area which lives under the Design tab.

image.png