In this article, you’ll learn how to remove the newsletter block header padding in Squarespace - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!

1. Why use this code?

The newsletter block in Squarespace is a fantastic tool (you’ll see I use it below, and throughout my entire site). The downside is that if you don’t want to give it a header using the block’s native header input, you get an obscene amount of padding that throws the spacing of your page off. Bad times. This handy little snippet fixes that with ease.

📩 Join the inner circle to get exclusive code updates

2. The code

You can target all newsletter blocks globally with the first code snippet, or just one newsletter block using the second snippet. Look at the headings to see which one you need.

🚨 You’ll need to download the Squarespace Block Identifier chrome extension to target the correct section in the second code.

Paste where? Design > Custom CSS

// Remove newsletter header padding globally //

.newsletter-block .newsletter-form-header-description p {

  display: none

}

// Remove newsletter header padding for one block //

#BLOCK-ID {

.newsletter-block .newsletter-form-header-description p {

  display: none

}
}

3. 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?