Troubleshooting Tips

I keep getting a Syntax Error when I try to use one of your codes.

When you’re adding code to Squarespace, you’ll see a syntax error notification. That message will stay there until you close your code, meaning all of your curly brackets have a pair. You’ll also see that syntax error message if you have any extra spaces or if you’re using the wrong character. Rest assured, it's really common, and you’ll see it every time you add code.

If yo’ve added a complete code and you’re still seeing a syntax error, this means that there is a character in your code that the browser doesn’t understand. It might be a misspelling or the wrong symbol.

You will see this when you start typing code and it stays there until you close your final bracket.

Double check that your code to make sure you don't have any extra spaced, dashes, or dots, and that you are using {curly brackets} where you need to, and not (parentheses) or [square brackets] and make sure you use semi colons ; colons : and commas, in the right places.

Semi colons separate code properties, commas separate colors and multiple properties in one line, and colons separate the property name from the property features. Here is an article with more info on symbols used in CSS: insidethesquare.co/resources/css-symbols

I am copying code from one of your tutorials and I’m getting an error.

PDF readers can sometimes skip or add dashes, dots, and spaces because it thinks it’s irrelevant formatting and not actual computer code. Make sure that the code you copied from a PDF matches the code you pasted, paying close attention to dashes like this - and semicolons like this ; 

I’m using the correct code for the correct version, and it’s still not working.

Is your code important enough? Sounds like a silly question but it does matter! When you add custom CSS, you’re giving a browser a second set of instructions to follow, and it might say "no thanks - I'm going with the first one I see here, not your custom code"

You can overwrite that by adding the text !important before the ; in your code.

Text, buttons, and font changes usually need the !important added to the code, but sometimes other elements do too.

If you’re following a tutorial exactly like the video, but your site doesn't change the way mine does, try making it !important.

Here is an example of a code that would change a button color & font size that needs the !important added to it:

.sqs-block-button-element {
background-color: blue!important;
font-size: 30px!important
}