How to reduce the height of a Code Block
If you add a Code Block to a page section that uses Squarespace’s Fluid Engine grid, you’ll have seen an issue where, the height of the Code Block cannot be reduced due to the ‘Embedded Scripts’ warning that appears in the Editor. Because this warning message consumes space in the Code Block during editing, this makes the Code Block too tall, causing it to dominate the surrounding content and affecting the overall height of the section, footer or page. Here’s an example:
Although the Code Block in this example only contains one line of code, the block is consuming seven grid rows! In my experience, this is typical of a Code Block that contains script.
My solution is to add some CSS to the Custom CSS panel to hide the warning message (at the top of the block) and the ‘Script Disabled’ message (at the bottom of the block). If you’re not sure where to find the Custom CSS panel, this guide explains where it is.
The video below shows the same Code Block. The one on the right has the CSS applied and so doesn’t have the warnings. The one on the left doesn’t have the CSS applied and so cannot be made smaller than seven rows.
Here’s the Custom CSS:
/**************************************
Hide Code Block warnings in FE
Use freely in your Custom CSS but
do NOT re-publish.
**************************************/
html.squarespace-damask .sqs-blockStatus {
display: none !important;
}
.removed-script {
display: none !important;
}When you’ve saved this and refreshed the page, you should find that the message has disappeared. You can then edit the page to reduce the height of the Code Block(s).
The first section of CSS hides the white box with the ‘Embedded scripts’ warning. The second section hides the ‘Script Disabled’ message.
