There are several possible causes if you’re wondering why your CSS isn’t working in Squarespace. Initially, ensure you’re using the Custom CSS editor rather than the Code Injection tool because the latter does not allow CSS. Additionally, remember that the Squarespace platform is continually changing, so some outdated CSS selectors might no longer function.
Remember that Squarespace’s platform is intended to be as accessible as possible. Thus, specific attributes that can potentially cause accessibility concerns are not enabled. If you encounter any difficulties in ensuring your website meets professional web development standards for accessibility, don’t hesitate to ask for assistance from Squarespace’s support staff.
3 Common Mistakes That Beginners Make When Adding CSS to Squarespace
Once you’ve mastered CSS, the possibilities for customizing your Squarespace site are virtually limitless. You may add distinctive typefaces, buttons, hover effects, and more.
It’s a good idea to understand basic best practices early on to make sure you’re utilizing the code correctly and setting up your website for continuing success before you get carried away experimenting with all the numerous things you can do.
Here are 3 common blunders new users make while adding CSS to Squarespace, along with tips on how to avoid them.
Not labeling each piece of code
The “Custom CSS” area under the Design tab on Squarespace is one way you can add CSS to your website.
You are given a blank white box to enter any additional CSS you use to personalize your Squarespace site when you access this area. The reason we say “additional” is because CSS is what allows elements like fonts and colors from the Site Styles panel to display on your site without requiring any adjustments from you.
One of the finest things you can do when you start utilizing code is to label each piece of CSS that you add to this box. You can see what each piece of code performs by adding labels. This is beneficial for several reasons:
- You need to be able to locate that specific piece of code in case you decide to change whatever you changed later or remove the code entirely if it is no longer necessary.
- When you’ve made more than a few minor changes to your site, it takes a lot of effort to look over each piece of code to determine what it does if it doesn’t have labels.
- You may avoid adding CSS twice for the same thing by using labels. When you go back to try to make edits, if you add more code for the same thing after forgetting that you already added it to make a change to your site, you’ll not only get confused when you do so, but you’ll also be slowing down your site unnecessarily, which is annoying to site visitors and hurts your SEO.
Simply add “//” before and after your label, and then add your CSS directly below that line to add labels to each piece of code.
Adding code for something you can change through the site styles panel
The Site Styles panel, which can be reached while editing any page of your site by selecting the paintbrush symbol, is where Squarespace is designed to let you set certain CSS features.
You can change the fonts, buttons, colors, and animations in this editor.
It is unnecessary to add code to something that Squarespace already permits you to modify in this panel, and doing so may slow down your website (much to adding CSS twice to the same element in your Custom CSS box). Making those adjustments directly in the Site Styles panel makes sense (and is simpler) because Squarespace’s default settings already provide the design guidelines for your website.
When seeking to update something on your website, it’s also great practice to turn to the Site Styles panel first since if you add some CSS and then try to edit something in Site Styles for the same element later, you won’t notice any results.
How come? Cascading Style Sheets, or CSS, operate just as their name suggests: they are read from top to bottom, and anything added at the bottom replaces everything added at the top. Any modifications you make using custom code are added at the bottom and are overlaid with Squarespace’s default CSS at the top (added using Site Styles).
That implies that the modifications you made in the Custom CSS box would take precedence over the CSS displayed due to what you choose in Site Styles.
Not checking how the code affects mobile and tablet views of the site
Since you’re probably viewing the changes you’re making on a desktop when adding code, it can be simple to overlook this. It’s crucial to remember that any new code you add will affect all views of your website, including those on smartphones and tablets.
When adding code, the first thing to do is to see how your website appears on a tablet and a mobile device. After that, you can determine whether further code is required to adjust the views on these other devices.
If you don’t own a tablet or would rather view mobile and tablet content directly from your computer, launch your website in Google Chrome and then select “Inspect” from the context menu. You can choose from various views, including “iPad Pro” and “iPhone X” at the top of your screen. By doing so, you can see how your website will look on various devices and make any necessary adjustments.
Common Ways to Resolve the Issues
If your custom CSS is not being applied correctly in Squarespace, there could be several reasons for this issue. Squarespace has its own structure and CSS rules, and conflicts can occur when trying to customize the appearance of your site. Here are common reasons why your custom CSS may not be working as expected and how to resolve them:
- CSS Specificity:
Issue: Squarespace has its own CSS rules, and if your custom CSS selectors have lower specificity than the default Squarespace styles, your custom styles may not override them.
Solution: Make your CSS selectors more specific or use !important to override Squarespace styles when necessary. However, use !important sparingly, as it can make your CSS harder to maintain.
- Incorrect Selectors:
Issue: If your CSS selectors are not correctly targeting the elements you want to style, your custom styles won’t be applied.
Solution: Check your selectors to ensure they match the HTML structure of your Squarespace site. Use browser developer tools to inspect elements and confirm your selectors are accurate.
- CSS Errors:
Issue: Syntax errors or typos in your custom CSS can prevent it from working.
Solution: Review your CSS code carefully for errors. Ensure proper syntax, correct property names, and valid values.
- Loading Order:
Issue: The order in which CSS files are loaded can affect which styles take precedence.
Solution: Ensure your custom CSS is loaded after Squarespace’s default styles. You can often control the loading order in the Squarespace site settings.
- Browser Caching:
Issue: Cached CSS files in your browser may not update immediately when you make changes.
Solution: Try clearing your browser cache or using “Hard Refresh” (Shift + F5) to force your browser to fetch the updated styles.
If you’ve checked all these potential issues and your custom CSS is still not working, consider contacting Squarespace support or community forums for assistance, as there may be template-specific or platform-related factors at play.