Custom CSS Code We Frequently use on Squarespace Websites
We get that when it comes to the thought of adding custom code to your website, it can seem a little scary! Well my friends, thats why we are here, because if you know what you are doing, it can actually be quite easy!
In this blog post, we’re going to share the 5 snippets of code we use most frequently on Squarespace websites and show you how to easily add this code into your Squarespace website as well!
SO, YOU’RE PROBABLY WONDERING WHY THE HECK PEOPLE ADD CUSTOM CODE INTO A SQUARESPACE WEBSITE? ALLOW US TO ELABORATE!
Without a doubt, you can launch a beautiful website without any custom CSS code added into it. Although, coding really does help take your website to the next level. In fact, we’ve written about 5 pages of code for this website you are currently on & any website we build, we’ll be sure to add in at leeeast a page of CSS code.
Coding on a website, whether it’d be CSS code or Javascript (don’t worry, I won’t drop too much tech terminology here beyond that!) is often added to websites to change specific items the builder dashboard may not be able to change. Writing code is similar to writing out rules as to how sections or elements on your website should behave. Oftentimes, there may be changes you want to make on your website that the Squarespace platform may not provide an option for in your site Style Settings - so thats where coding comes in handy and code is very commonly used across all websites, no matter the builder platform!
where can you add custom code into your squarespace website?
Squarespace makes it super easy to add in custom code into your website. Under the WEBSITE tab, scroll all the way to the bottom > WEBSITE TOOLS > CUSTOM CSS.
You can also use the search function and type “custom css” or “css”.
Allow us to show you below:
let’s talk code
Below you’ll find a few of our top snippets of code we frequently use on Squarespace websites:
Feel free to copy this code and add it into your website as well! You’ll be a coding pro in no time! 😉
1) removing hyphens
Ever checkout your website on your phone and realized you have hyphens added all over the place when your text jumps to the next line? Annoying right? PS: This code below will solve that problem for Squarespace 7.0 websites and for 7.1, no need to worry about adding this in!
/* remove hyphens */p, h1, h2, h3 {-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}2) Removing the underline below footer links
Did you know any links within Squarespace’s website footer will automatically get underlined? It’s a great way for website visitors to know the text is a clickable link, however, depending on the website design, we like to remove the underlines to keep things clean and sleek (people tend to understand that footer links are clickable anyway!). This can only be done through CSS code, so feel free to use the code provided below to get rid of those lines!
BRINE TEMPLATES (FOR SQUARESPACE 7.0)
footer a { border-bottom: none !important; }SQUARESPACE 7.1 TEMPLATES
footer .sqs-block-html a { background-image: none !important; background-repeat: no-repeat !important; text-decoration: none !important; }3) keeping website buttons the same width size
This next set of CSS code is super useful, especially if you use a Squarespace page for your Instagram landing page, which is always great to have on social media as a “link in bio”! If you don’t already have an Instagram landing page, we’ve written a blog post on how to set that up here!
Unless the text I am using for those buttons is the same length, the buttons come out at all different widths, and this may drive some people wild - so safe to say, there’s a solution for this via code!
In this snippet of code, I’ve set the width for my large buttons to 80%. If you are using medium or small sized buttons, you’ll just want to be sure to switch out the “large” text to “medium” or “small”.
/* button size adjustments */.sqs-block-button .sqs-block-button-element--large {
width: 80%;
}Without a doubt, adding CSS code into your website can be a game changer, and we love to share our tips and tricks with our community to help website users feel more comfortable with writing code! Feel free to screenshot or save these snippets of code for future use, you just never know when they may come in handy!
Happy Coding Friends!
Looking to make a strong first impression with your website?
Our Squarespace website templates may be the right fit for you! Our DIY option allows you to play and plug your content and get you launched pronto!
