How to reduce spacer block height with CSS in Squarespace (7.0 & 7.1)

Dec 10

The Spacer Block element is an essential tool for your Squarespace website design, but by default, the Spacer Block has a set height that can be too large for some instances.

In this tutorial, we’re sharing copy & paste CSS to adjust the Spacer Block minimum height for more flexibility while designing your Squarespace 7.0 & 7.1 website!

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

Squarespace 7.0 & 7.1

// 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;
}