Is there a way to unhide or edit the footer in Squarespace when the "hide footer" code was (accidentally) put into the footer?

Question

It had been a while since I built a new site in Squarespace, and I accidentally pasted the following code INTO the footer of my site on Squarespace using a code block (instead of the code injection panel...like a dummy):

it was either:

<style>
  .header{
    display:none !important;
  }
 #footer-sections{
  Display:none !important;
  }
</style>

OR:

<style>
  .header, #footer-sections{
    display:none !important;
  }
</style>

Now, I can't edit those sections to remove it so my shopping cart is inaccessible. I've added a shopping cart where I can manually, but it still doesn't always appear and is not as functional.

Help!

I've tried adding override code into my custom CSS and Code Injection using "!important", but unfortunately I think the original code also already contained "!important"

Answer 1

While editing your website and actively viewing/editing a page which you know to have the footer code within it, open your browser's developer tools/inspector.

Keyboard:

• Windows: Ctrl + Shift + I or F12
• macOS: ⌘ + ⌥ + I

You can then use the inspector to find an area near the bottom of the page, close to the hidden element in question. Having done that, browser the underlying code to find the hidden element on the page. Once found, click on that element within the inspector and then disable the applicable CSS rules which are hiding that element. With the element showing, you should then be able to hover over the block field as usually, select "Edit" and proceed to edit/delete the code (or remove the block entirely).

Here is a video that gives a visual example of using your developer tools and inspector while in the backend editing system within Squarespace. However, the purpose of the video is different than your purpose, so it does not demonstrate every step outlined above; it simply shows an example of opening and using dev-tools/inpsector.

If that doesn't work, you can temporarily add the following via Footer Code Injection:

<style>
body #footer-sections {
  display: block !important;
}
</style>

By adding more specificity with body, it should override the CSS you added already, showing the footer sections and allowing you to go in and remove that code block.