How to remove space under code blocks in Squarespace 7.1
In this tutorial, you'll learn how to remove space under code blocks in Squarespace 7.1. If you’re embedding third-party widgets, videos, or custom code in Squarespace 7.1, you might notice an unexpected gap appearing below your code blocks. This blank space can disrupt your site layout and annoy your carefully designed spacing. In this guide, we’ll show you why this happens and how to remove it with a simple CSS tweak.
Table of Contents
Why the space appears
When you insert custom code inside a Squarespace code block especially embeds like widgets, booking tools, or video scripts Squarespace sometimes leaves extra space underneath the block. This happens because a status bar or safe-mode preview element gets included in the block’s height calculation, even though it isn’t visible once the page goes live. The result? A gap below the block that shouldn’t be there..
The CSS Solution
To fix this in Squarespace 7.1, you can add a small snippet of CSS to hide the extra elements that contribute to the unwanted space.
Step-by-step instructions
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below
/* Remove extra space under code/embed blocks */
.sqs-block .sqs-blockStatus,
.sqs-block .removed-script {
display: none !important;
}
Note: use the code below to target a specific block ID:
/* Remove extra space under code/embed blocks */
html.squarespace-damask [#YOUR-BLOCK-ID] .sqs-blockStatus,
[#YOUR-BLOCK-ID].sqs-block .removed-script {
display: none !important;
}
Below is an example with a block id
/* Removing the space under code blocks in Squarespace 7.1 */
html.squarespace-damask #block-bff4c4a8b1a6416f5e65 .sqs-blockStatus,
#block-bff4c4a8b1a6416f5e65 .sqs-block .removed-script {
display: none;
}
Customisation options
Here are a few extra tips:
If only specific code blocks have gaps, target them by block ID for more precise control.
If your embed has margins or padding added by the script itself, you may need additional CSS to override those styles.
Always test on multiple screen sizes to ensure your layout stays responsive..
Key Takeaways
Extra space under code or embed blocks is usually caused by internal Squarespace elements being counted in the block height.
A small CSS snippet can remove this space across your site.
The fix works best when applied via the Custom CSS area in Squarespace.
FAQs
Will this CSS affect other parts of my site?
No—this snippet only hides internal block elements and doesn’t interfere with your visible design or embedded content.
Do I need a paid Squarespace plan for this fix?
No—Custom CSS is available on most Squarespace plans that support code injection.
What if the gap still appears after adding the code?
Try clearing your cache and previewing in an incognito window; sometimes live browser caching can show old styles.
Conclusion
Removing unwanted space under code blocks in Squarespace 7.1 is a common tweak for modern sites using embeds and custom widgets. With just a few lines of CSS you can clean up your layout, tighten your design, and make your content flow exactly the way you want.
If you’d like help applying these tweaks or need more advanced customisations, feel free to reach out or book a consultation!
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
