5 Squarespace CSS Mistakes Beginners Make
CSS is easy... until it's not. As much fun as it is to change your site with code, there are some common mistakes that you need to look out for when working with custom code for Squarespace!
I have spent hours pulling my hair out over super simple code fixes. This is the video I wish I had access to years ago and I hope these tips help you make sense of those syntax errors!
If you are brand new to custom code, or a CSS super nerd like me, I hope you find this quick rundown of common problems helpful.
Mistake #1: Your code isn't important enough.
Your code is perfect, but nothing happened when you tried to change the background color on a button. Your code might be perfect BUT when we add code to Squarespace, we are overwriting the source code of the program and the browser can get confused! It will see one code in the start of the file and your code at the end - and sometimes it picks the first one it sees.
Annoying right?! So how do we stop that from happening?
We can make your code more important than the first one by literally labeling it - important. Yup! Exclamation point important - it's a sneaky way of saying "hey browser! This is the one you want to use!" Buttons are notorious for seeing that extra code - but sometimes even basic text codes can need a little overwriting. So if you ever type in a code and nothing happens, try making it !important.
Mistake #2: You're using the wrong code name.
In Squarespace every single thing gets a code name - called a selector if you wanna get all technical about it. These selectors can be one simple name - like img. But if you use code to say "he browser - put a grayscale filter on img" it's going to do that on every single image on your site.
If that's what you want, cool! But what if you just want the images in a list section to have that filter? You need to say "hey browser - see this lest section? Any image in here, make it gray" That looks like this in code: .list-section img {filter:grayscale(1)}
Now here is the tricky part - there are THOUSANDS of selectors in Squarespace so picking the right one is really important! Older versions of Squarespace use different code names for different things so if you are using an old version of Squarespace you need to be extra careful.
Mistake #3: You’ve got the wrong characters in your code.
This one happened to me ALL the time when I first started working with code. Copying CSS out of a PDF or a blog post might result in skipping important characters like dashes, dots, spaces, and even changing things like a hyphen because the program assumes it’s text formatting and not custom code. Be super careful about your symbols and characters! Even quotation marks can be cause for concern.
Mistake #4: You didn’t close your media query.
When creating code specifically for the mobile version of your site, you need to use a media query with an extra set of brackets. A lot of beginners forget to close those brackets because it looks like an extra character, when it’s actually a really important one!
Mistake #5: You’re code isn’t labeled as a style code.
If you are adding code to a single page on your site using a code block or page header code injection, you have to let the browser know it’s a style code. We don’t do this in site wide CSS becuase under Design > Custom CSS, that is the only type of code you can put there! But in a code block or page header code injection, you have other options so we have to say “hey browser! this one is a style code!” like this: <style> css code here </style>
