Best Code Snippets for Every Squarespace Website // Top 5 Squarespace CSS Codes

In this video, you’ll learn five custom code snippets my friend (and brand strategist) Phil Pallen uses on every Squarespace website he creates for his clients.

First, he'll show you how to use the root function to set colors universally on your Squarespace website, giving colors names instead of relying on HEX codes, and matching Squarespace's site styles to make writing code even easier. Then, you'll learn how to apply a smooth scroll effect to your anchor links, create a thicker horizontal line, set custom P3 font, and hide your footer on mobile only.

We are covering a LOT in this tutorial, so use the timestamps below if you want to jump ahead:

00:42 - Give colors names (instead of relying on HEX codes) and match those colors to Squarespace's site styles

Replace "XXXXXX" below with your HEX codes and paste into your CSS:

:root {
--lightest: #XXXXXX !important;
--light: #XXXXXX !important;
--accent: #XXXXXX !important;
--dark: #XXXXXX !important;
--darkest: #XXXXXX !important;
}

01:42 - Add a smooth scroll effect to your anchor links by pasting this snippet into your CSS:

html {
scroll-behavior: smooth;
}

Don't forget that your anchor links require a code block with ID, hyperlinked with a hashtag. Instructions in this video:    • How to Create Anchor Links in Squares...  

03:08 - Make a horizontal line thicker by adding this code snippet (and adjusting the thickness - this is set to 2 pixels high as shown in the example):

hr {height: 2px !important;}

For more help on this, check out this tutorial:    • How To Change The Horizontal Line In ...  

05:01 - Custom style your P3 text (beyond what site styles in Squarespace allows) with this code snippet and adjust accordingly:

.sqsrte-small{
letter-spacing: 0.2em !important;
text-transform: uppercase!important;
font-weight: 600;
line-height: 1.6em !important;}

06:02 - Hide footer on mobile with this code snippet:

@media only screen and (max-width: 768px) {
footer {
display: none !important;
}
}

-----------------------------------
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
-----------------------------------
× LIKE, COMMENT, AND SUBSCRIBE ×
-----------------------------------
x PHIL'S CHANNEL →    / philpallen  
× PHIL’S INSTAGRAM →   / philpallen  
× PHIL’S WEBSITE → https://philpallen.co
x BECCA'S CHANNEL →    / insidethesquare  
× BECCA’S INSTAGRAM →   / thinkinsidethesquare  
× BECCA’S WEBSITE → https://insidethesquare.co
-----------------------------------