Custom CSS Troubleshooting Tips

Here are 10 frequently asked questions about common troubleshooting issues Squarespace users run into when creating custom CSS:

My CSS isn't changing anything on my site. Why?

There are a few reasons for this. First, make sure your CSS code is correct and free of typos.

Second, Squarespace loads stylesheets in a specific order, so your custom CSS might be overridden by another stylesheet. You can also try adding `!important` after your CSS properties to make your codes take priority.

A third and super common reason is that you are using the wrong selector. AI programs like ChatGPT and Gemini are unfamiliar with Squarespace source code unless you specify it in your initial query. You can also find code online that is for a different version of Squarespace. Learn what version & theme you are using at insidethesquare.co/themes

I keep getting a Syntax Error when I start typing code. What is this error & how do I fix it?

A syntax error message is a fancy way of saying your code has a tiny hiccup. It could be a missing curly brace (the squiggly ones: { }), an extra space where it shouldn't be, or even a typo. Squarespace is just looking out for you, ensuring your code is grammatically correct in the world of web languages.

The message sticks around until you close your code properly, making sure every curly brace has its matching partner (think of them as holding hands!) all the symbols are in the right places, and that it understands what your trying to say in your code. This ensures your custom code will be able to tell the web browser exactly what to do.

This article has more about syntax errors and how to fix them: insidethesquare.co/resources/syntax-error

How can I target one specific thing on my Squarespace site with CSS?

Squarespace uses selector classes and IDs to identify elements. IDs are unique for individual items, while a selector class is a label for a specific type of item. You can use one or both in your custom code, and this blog post will teach you how: insidethesquare.co/resources/selector-vs-id

Where can I find Squarespace-specific CSS classes or IDs?

Squarespace doesn't provide a comprehensive list of all classes and IDs, but I do! You can get access to my personal code collection with over 500+ organized selectors for Squarespace at insidethesquare.co/css

How can I preview my CSS changes before publishing them?

Squarespace doesn't offer a live preview for CSS changes. However, you can make your changes in the custom CSS panel and not select save! The changes won't be visible on your site until you save them.

My custom font isn't showing up on my site. What's wrong?

Squarespace only supports a limited number of web fonts. You can check their supported fonts list and upload your font if it's compatible. Make sure you're using the correct font family name in your CSS.

Where can I learn more about Squarespace custom CSS?

Right here InsideThesquare! 🙌 I have a free guide that will teach you the basics, over 200 free tutorials you can explore, and a course on creating your own custom code for Squarespace available at insidethesquare.co/beyond

Should I hire a web developer to help with my Squarespace customizations?

If you're not comfortable with CSS or want more complex customizations, you can consider hiring a Squarespace developer. I do want to take this opportunity to encourage you to try to create the code yourself!

Squarespace has many features and functions that can support a variety of businesses. A few simple lines of custom code can make it uniquely yours, and with my training, you won't need to hire a pro. Level up your skills with lifetime access to my code course at insidethesquare.co/beyond