Here are 8 Squarespace CSS tricks you can use to instantly make your website better
Even though Squarespace is an amazing platform for businesses to build a website without having to touch any code, it doesn’t come without its limitations. If you’ve been tinkering with your site and are frustrated with the limitations of the built-in style editor, it might be time to push the envelope with a little CSS customization.
Before I start designing and building client’s sites, the first thing I do is drop in the following 8 CSS codes. These codes, in particular, aren’t the most flashy or impressive customizations, but they will add to the functionality of your Squarespace site and create a better user experience for your website visitors.
And since I’ve found that all of these codes apply to 99% of every Squarespace website I build, I wanted to compile them in one handy place! My hope is that you can use these customizations to take the next step in making your Squarespace website go from good to great!
What is CSS?
CSS stands for “cascading style sheets,” which is a fancy way of saying how browsers read and display the code on your website. CSS is going to bring style to your website by interacting with HTML elements, which are the foundation that your web pages are built on. You can easily use CSS to override elements of your Squarespace website so that you can add additional functionality and style.
Interested in learning CSS? Check out these free resources:
Adding custom CSS in Squarespace
To start adding custom CSS to your Squarespace website, go to the Custom CSS Editor. That is going to be the area where you’ll be able to override the Squarespace style editor with your own CSS.
Navigate to Design > Custom CSS.
Ready to rock? Let’s jump in!
Remove hyphens on mobile
This one is a really common problem. You finally get your website text to look awesome on desktop, but the second you view it on a mobile device, you have hyphens creating unwanted word breaks all over the place. Sound familiar?
Your first instinct might be to adjust your text in the style editor. But that’s going to affect your desktop design, unfortunately. Luckily, we can use a little CSS and get rid of them for good without compromising your desktop design! Here’s how you remove hyphens on mobile.
if you want to remove hyphens, Use this code:
//remove hyphens// p, h1, h2, h3 { hyphens: manual !important; hyphens: manual !important; hyphens: manual !important; hyphens: manual !important; }
Remove underlines from body links and bullets
Squarespace will underline all of your links by default. I prefer to remove underlines from links because I think it makes for a cleaner and more modern design. If you have a lot of links grouped together, the default underline style can also add unnecessary visual clutter to your website design.
If you are going for a modern design, removing underlines from links is a quick and easy way to clean up your website design.
if you want to remove underlines from links and bullets, Use this code:
//Remove Underlines From Body Text Links and bullets// .sqs-block-html ul a {border-bottom: none;} .sqs-block-html p a {border-bottom: none;}
Remove link underlines in footer
If you’re removing underlines from links in your website, then you’ll probably want to remove them from your footer in order to keep things consistent.
if you want to remove link underlines in your footer, USE THIS CODE:
//Remove links in footer// .Footer-blocks p a { border: none !important; }
Remove space at bottom of site on mobile
For Brine-family templates, the mobile view has an option to display contact information or footer navigation. If you don’t choose to use these in your website, then an empty, gray bar shows up at the bottom of your site on mobile devices. It’s not pretty.
The reason the bar shows up has to do with it adding padding of 8 pixels on the top and bottom.
Once you drop in the code below, you will see the gray bar immediately goes away. Boom!
To remove the space on mobile, USE THIS CODE:
//remove space at bottom of site on mobile// .Mobile-bar.Mobile-bar--bottom { padding: 0; }
Custom narrow width for blog posts
If your website has a blog, line length is something you’ll want to pay attention to. Having the right amount of characters on each line is going to be key to the readability of your website copy.
Sources are going to vary on what the optimal line length is. But in general, it’s anywhere between 50-75 characters per line, including spaces.
If your copy is too wide, your reader’s eyes will have a hard time focusing on the text in front of them.
If your line length is too narrow, their eyes will have to dart back and forth too often, which can cause your readers to skip over important information. Not good!
Use the code below if you want to constrain your blog post width so you can achieve better line length on your website.
if you want to have a narrow width for blog posts, USE THIS CODE:
//custom width for blog// .BlogItem { max-width:750px; margin: 0 auto; }
Disable map scroll
If your business has a physical location, the Squarespace map block is a great way to display a Google Map on your website. When you scroll over the map, it will automatically start zooming in or out. This can be really annoying when all you want to do is scroll down the page, especially if the map takes up a lot of vertical space on the screen.
This is an even bigger problem with mobile devices. If you don’t have a reason why your website specifically needs a map to scroll, disabling map scroll will provide a better user experience for your visitors.
if you want to disable map scroll, USE THIS CODE:
//disable map scroll// .sqs-block-map {pointer-events: none;}
1 Product Per Row on Mobile
It’s safe to assume that almost half of your website visitors will browse your website from their mobile device. If you are selling products online, then you’re going to want your goods as big as possible so that they are easily seen on phones. You don’t want potential customers squinting when they’re looking at your latest product line, right!? The following code makes use of media queries in order to display one product per row on mobile.
if you want to display 1 product per row on mobile, USE THIS CODE:
// 1 Product Per Row on Mobile // @media only screen and (max-width: 640px) { .ProductList-item { width: 96% !important; padding-right: 0px; margin-left: 0px; float: none; } }
Hide cart until a product is added.
Navigate to Settings > Advanced > Code Injection > Footer.
Squarespace will display the shopping cart in your site navigation as an icon or text (depending on how you have it set in your style settings).
I prefer to not have the cart visible at all unless someone adds something to it. This one is based on my personal preference, but I think it makes for cleaner navigation and a better user experience.
if you want to hide the cart until a product is added, USE THIS CODE:
<script> (function () { var carts = [].slice.call(document.querySelectorAll('.Cart')); carts.forEach(function(cart) { hideCart(cart); }); function hideCart(cart) { var cartQty = cart.querySelector('.sqs-cart-quantity'); // Handler function handler(target) { if (target.innerHTML === '0') { cart.setAttribute('hidden', ''); } else { cart.removeAttribute('hidden'); } } // Observer handler var observer = new MutationObserver(function(mutations) { handler(mutations[0].target); }); // Hide/show the cart when the page is loaded handler(cartQty); // Hide/show the cart when an item was added/removed observer.observe(cartQty, { childList: true }); } })(); </script>
And there you have it!
These are the 8 CSS codes that I incorporate into every Squarespace website project to instantly make better sites for clients. I hope this helps you with your Squarespace customization efforts!
