Self-Help Support

Troubleshooting

Having an issue with your template? You're (probably) not the first. So, I've compiled some of the most common situations: What to look for, what's happening, and how to fix it yourself. If you're still having trouble after reviewing the list, reach out and I'd be happy to help!

01

Design suddenly changed after buying subscription.

Symptoms

• Split sections are not the right color.
• Folder color is incorrect or transparent.
• Back to Top arrow isn't working.

Situation

All Studio Mesa templates require Code Injection for everything to work, which is a feature that's not available on the Personal Subscription. On a trial, you get access to all features — but when you get the Personal plan, it disables Code Injection.

Solution

Upgrade from Personal Subscription → Business or Commerce Subscription

02

Something is broken after using the Custom CSS window.

Symptoms

• CSS changes aren't working as expected.
• Custom font isn't loading properly.
• Random site features aren't working.
• Split Sections or Content Cards aren't working.

Situation

Squarespace's Custom CSS window is tiny, not very efficient, and very prone to making mistakes in (especially without realizing). If you just customized something there, like adding a custom font or changing border radius, there may be an error that's interfering with the rest of the code working — things like random characters, forgetting a ";" after a style change, or not having the closing "}" bracket at the end of a declaration. The red error at the bottom will tell you where, and what's going on. Note: The error might display the first declaration that's affected by the error, not necessarily the location of the error itself (see screenshot).

Solution

Check for errors at the bottom of the Custom CSS window and repair.

03

Bottom sections are uneditable on hover in the Editor.

Symptoms

• Top sections are fine, but bottom ones are unresponsive.
• Section in editor looks fine, but saved site appears broken.
• Hovering previous section shows following section settings.
• Can't edit a section at all on hover.
• Custom icons aren't displaying properly

Situation

This problem usually happens on templates like Parable or Retrograde that have sections with custom icons. The SVG code you paste into a Code Block to make icons work can sometimes have issues or be incomplete, which causes all the following code (the rest of the page, usually) to have issues.

Exception: The code shown as black (like the </g> or </svg> in the screenshot below) seems to work fine. Though it may not be perfectly complete, Squarespace seems to accept it — the issue is typos, random characters, or code that's red.

Solution

Double-check that all icon code is either black or green. Fix any red errors.

04

Contact form doesn't look right.

Symptoms

• Form inputs are unstyled or don't match.
• Incorrect input padding or horizontal alignment.
• Some parts of the form are okay, others are not.

Situation

Squarespace has substantially changed the contact form's code like 4 times in the last two years. Because I can't retroactively change template sites, sometimes the CSS used to customize in the past will conflict with what's in the latest update.

Solution

• Delete the Contact Form section within Custom CSS. The location of this will vary depending on the template you're using (⌘ + F will not work to search for it, sorry).
• Delete all code in the Page Injection for page with the form.
• Add new form styles via the Forms section in Site Styles

Extra

Squarespace still doesn't have a way to put two inputs on a single row (cringe), so you can use this code to make it work. Paste it into the Code Injection on the page with the form — the (number) in each item in the code corresponds to the input in the form. If you have more or less, simply add or remove that item from the code.

<style>

@media screen and (min-width:800px){
/*Formatting Left Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(1), .form-wrapper .react-form-contents .field-list .field:nth-child(3){
display: inline-block!important;
width:49%!important;
margin-right:2%!important;}

/*Formatting Right Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(2), .form-wrapper .react-form-contents .field-list .field:nth-child(4){
display: inline-block!important;
width:49%!important;}}

</style

<style>

@media screen and (min-width:800px){
/*Formatting Left Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(1), .form-wrapper .react-form-contents .field-list .field:nth-child(3){
display: inline-block!important;
width:49%!important;
margin-right:2%!important;}

/*Formatting Right Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(2), .form-wrapper .react-form-contents .field-list .field:nth-child(4){
display: inline-block!important;
width:49%!important;}}

</style

<style>

@media screen and (min-width:800px){
/*Formatting Left Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(1), .form-wrapper .react-form-contents .field-list .field:nth-child(3){
display: inline-block!important;
width:49%!important;
margin-right:2%!important;}

/*Formatting Right Side*/
.form-wrapper .react-form-contents .field-list .field:nth-child(2), .form-wrapper .react-form-contents .field-list .field:nth-child(4){
display: inline-block!important;
width:49%!important;}}

</style

05

Content randomly disappears on mobile.

Symptoms

• Headings, paragraphs, or buttons disappear randomly.
• Content might show on some mobile browsers, others not.
• Mobile editor hides some content.

Situation

When Squarespace rolled out the Section Dividers feature, they did it (sloppily) in phases and left users with foundational code changes that required quick fixes to ensure sites with existing custom code didn't break (read: all of my templates). At some point, the fix that I scrambled to push out became obsolete via more substantial changes, and now it seems to cause issues of content disappearing on mobile breakpoints (very fun, thanks Squarespace).

Solution

• Simply delete the line of code outlined below and hit save.
• The exact line of this code will vary with each template — most newer copies of templates won't have this line as I've corrected it already, but older ones (pre-2023 I think) will possibly experience it.
• Make sure not to accidentally delete anything else! Reference troubleshooting point 2 above where the Custom CSS window has an error.
• It's just below the //---MESA OS---// banner, if that helps.

06

Section / text colors are incorrect or broken.

Symptoms

• Split section background are broken.
• Some text blocks blend in with the background.
• Site Style colors are inconsistent with what's on published site.

Situation

Squarespace published a significant update to how color variables are handled within the platform, making the custom code used in my templates malfunction. This change affects ALL Studio Mesa templates — visit this dedicated troubleshooting page to apply the corrected code.

Still have a question?

Check out the FAQ page, or send a message via the Contact page.