How to disable CSS in Squarespace editor mode (still active on live site!)

When we apply code to a Squarespace website sometimes we will want the effects of that code to display on the front end of our website, but not in the backend. 

For example, if you’ve used custom code to hide a block on your webpage, you want that code to be displayed on the front end and hide said block, however if it’s displayed within the editor and you want to e.g. move the block, you can’t because the code is applied and the block is hidden. 

What you need to do therefore is wrap the code in, you guessed it, more code, to tell Squarespace not to display the code within edit mode. 

This is particularly useful if you use a lot of code when building a Squarespace website and want to ensure the code isn’t getting in the way when you want to perform simple, native tasks in the backend.

Watch the video

Check out the YouTube video below 👇

How to hide custom CSS in Squarespace edit mode 

First things first you need to hide your block (or add whatever the code is that you want to hide in the backend, in this tutorial we’ll be hiding a block). To find out how to do so check out my guide to hiding a block on Squarespace.

You then need to wrap your hide block code in the following code:

body:not(.sqs-edit-mode-active) {
/*your code goes in here*/
}

This code ensures you can easily access the hidden block in your Squarespace edit mode.

---

📩 Join the inner circle to get exclusive code updates

---

This coding trick is also useful if you’re conducting a client handover. If your client has little to no coding knowledge, chances are they need to be able to make simple edits to their website without having to dig through the CSS to do so. 

Adding this code ensures they can easily access everything they need to. 

Be sure to give it a go and add this code to your website and then let me know how you find it!

---

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?