Why your code only works in the backend and not on the Live site

How to fix code breaking on the Live Site and only working in Edit Mode in Squarespace

This tutorial explains how to troubleshoot a situation in Squarespace 7.1 where custom CSS appears to work in the backend editor but fails entirely on the live site. The root cause is often a hidden syntax error that the Custom CSS panel does not flag, such as an extra or misplaced bracket that disrupts how the stylesheet is parsed when rendered live. Instead of manually testing sections of code, the recommended approach is to inspect the live site using browser developer tools, navigate to the compiled custom CSS file, and locate the exact error highlighted there. Once identified, the issue can be resolved either by completing the intended CSS rule or removing the unnecessary code, restoring all styles across the site.

Sometimes you WANT code to work ONLY in the backend.

But 99% of the time, you need it to work at ALL times.

So, when NONE of your code is working on the Live Site, but everything looks gorgeous while editing, and the Custom CSS Window isn’t giving you any error information whatsoever, stress and panic can come up faster than the topic of weather when making awkward small talk with a stranger.

It’s a really frustrating situation, and it’s more common than you think.

But luckily, there’s a very quick way to check wtf is going on so you can troubleshoot in 5mins flat and move on with your day.

Let’s jump right in!

Video timestamps

00:00 - Introduction

Alrighty so let me show you why your code is not working at all on the live site, but everything seems fine in the backend. So here I have a site where I just added a couple of different modifications. I have some styling here for the active nav links, and then I have this coffee cup set to white on this page because it has a darker background. I have a couple of changes applied to the summary block, and then I even included a little icon animation here for the newsletter button. Now everything here like I said is working correctly, and you can even see that there are no syntax errors showing up here inside the custom CSS window.

00:38 - The Issue on the Live Site

However if I go onto the live site, nothing is showing up. My coffee cup is black, I don't have my styling applied for the active link, I don't have anything applied to the summary block, and the little icon here for the button is not showing up. Now the frustrating part about this issue is that because nothing is working, you don't really know what to troubleshoot. I mean one of the ways that you can go about it is to start removing different snippets from your custom CSS window and testing everything again on the live site to see if you can narrow things down to one precise line of code or at least a group of code. However if you're working with a really large site that is very time consuming.

01:22 - A Faster Way to Diagnose the Problem

So let me show you what I recommend doing instead so that you can quickly spot where the issue is and fix it. What you'll need to do is go onto the live site, and you're going to open up your inspect element window as normal. Now because we don't know where the issue is coming from, we're not going to start inspecting element by element, we're going to hop onto the full custom CSS file instead.

01:45 - Accessing the Custom CSS File

To do that you need to hop onto the sources panel, click on this little icon, and in here you're going to want to go where it says static1.squarespace.com. If you open this up you're going to see a folder that says static, and then if you open this one again you're going to see this folder that says Custom CSS. Now at the time of this recording, this is in where are we, April 2026, this is where the custom CSS file is located in Squarespace 7.1. I don't know if they're gonna change that in the future, they recently just changed this, so hopefully this will stick around for a while. But in any case if you go into this custom CSS folder and you open it up you're going to see your custom CSS file. This is where all of the code from your custom CSS window is now going to be located, and more importantly you're going to see the syntax error that didn't show up inside the custom CSS window.

02:33 - Identifying the Syntax Error

And this error is going to point to the thing that is creating the whole problem for all of the code. So in my case you can see that this is highlighting the summary block styling section that I have inside my custom CSS window, and this little arrow is pointing into this curly bracket. If you take a closer look you can see that this bracket is not really doing anything in there. So I have the .summary-v2-block and then I have this opening curly bracket, and then I don't really have a declaration or another selector in here, which is what the browser would expect to see. So this lingering bracket that I have in here is creating the problem.

03:29 - Why the Error Doesn't Show in the Backend

Now the reason why that is not causing the syntax error inside the custom CSS window is because if I look for that bracket in here, you can see Summary Block Styling .summary-v2-block, we have the curly bracket that should be there, and then we have the extra one. The problem is that the extra one also has a closing pair down here, so the error is not really being registered inside this window because of the type of code that this window considers valid. The problem is when this gets rendered or parsed, as that error said, into the live site, that is where the issue comes up. We're not going to get more technical than that because it's really irrelevant at this point.

04:13 - Fixing the Issue

I'm just going to show you how you can fix it. So basically here you have two options. Depending on the reason why this bracket is here, what you can do is complete it. So if you were missing a selector in here because you wanted to nest something else that you were targeting within that same block, the .summary-v2-block in my case, then you can just go ahead and complete your selector with whatever it is that you need. If you don't need that in there you can just go ahead and remove it, of course remove the complimenting pair down here. And now once you save the changes and refresh your live site, your code is going to work once more.

TL;DR

• Squarespace’s Custom CSS Window doesn’t catch this specific kind of issue

• To troubleshoot, you can either remove snippets one by one to narrow things down to the problematic portion of the code OR check the full stylesheet on the live site.

• The full Custom CSS file will show you the syntax parsing error that the Custom CSS Window doesn’t experience, and you’ll be able to deal with the lingering brackets as needed – based on your customization’s requirements.

That's it!

Now you know what you can do if you ever run into this really weird issue where none of your code is working on the Live site while it's still working correctly in the backend.

Until next time,

B.