Top 3 CSS code snippets for your Squarespace site

Squarespace is a great platform for artists, small business, and everyone in between. In this article, I’ll be highlighting my top 3 favorite CSS snippets. I use these CSS codes to enhance any website and these codes won’t break your brain!

Just a note: Squarespace does not offer support for custom code, read up on their disclaimer first before you begin. If anything stops working on your site, you may have to remove the custom code. Just make sure to back it up somewhere so you can add it back piece by piece until you narrow down what CSS snippet is affecting your site.

---

🔔 Before You Start

Let’s talk about non-code descriptors. These non-code descriptors allow you to leave comments and organize your code.

Code blocks should start with these so you can remember what your CSS snippets are targeting. This will help you when you go back to edit, add or delete some of your custom code. Whatever you write after the back-slashes will not appear nor affect your CSS coding.

To start a CSS snippet example:

//Description here - Start//
{CODE}
//Description here - End//

You can write “Start“ and “End“ to CSS descriptors to quickly read the code at a glance.

---

Turn Off Automatic Hyphenation

Before I work on any site, this is the first CSS snippet I add, no matter what! I personally think automatic hyphenation is super annoying and can make pages look awkward. By default, Squarespace has this enabled and it’s especially noticeable on mobile, so lets disable it!

FOR SQUARESPACE 7.1

Sitewide

// Sitewide Remove Hyphenation //
p, h3, h2, h1, div, span, input, p a, ul li {
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important;
   -ms-hyphens: manual !important;
   hyphens: manual !important;}
// Sitewide Remove Hyphenation //

Mobile Only

// Mobile Only Remove Hyphenation //
@media screen and (max-width: 767px) {
 p, h3, h2, h1, div, span, input, p a, ul li {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;}}
 // Mobile Only Remove Hyphenation //

FOR SQUARESPACE 7.0

Sitewide

// Sitewide Remove Hyphenation //
p, h1, h2, h3 {
   -webkit-hyphens: manual !important;
      -moz-hyphens: manual !important;
       -ms-hyphens: manual !important;
           hyphens: manual !important; }
// Sitewide Remove Hyphenation //

Mobile Only

// Mobile Only Remove Hyphenation //
@media only screen and (max-width: 640px) {
 p, h3, h2, h1, div, span, input, p a, ul li {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;}}
  // Mobile Only Remove Hyphenation //

---

Hide Header + Footer From A Single Page

This CSS snippet is awesome and a simple way to remove unwanted headers or footers from a single page. This is especially useful for hidden mobile link pages and landing pages.

FOR SQUARESPACE 7.1

From your Squarespace account, locate the page you’d like to remove both the header and footer from and click on the page settings ⚙ icon.

<style>.header, #footer-sections {
  display:none!important;}
</style>

FOR SQUARESPACE 7.0

From your Squarespace account, locate the page you’d like to remove both the header and footer from and click on the page settings ⚙ icon.

<style>.Header, .Footer, .Mobile-bar{
  display:none !important; }
</style>

If you only want to remove both the header and footer, you can delete which element you’d like to show.

.header, #footer-sections, or .footer depending on which Squarespace platform you are on.

---

Remove link underlines

If you’d like to have a bit more control over hyperlinks and words that are underlined, you can remove the automatic ‘link underline’. I like to specifically use this in the footer but you can use this globally throughout your site.

FOR SQUARESPACE 7.1

Sitewide

// Removing link underline // 
a {text-decoration-line:none !important;}
// Removing link underline // 

Footer only

// FOOTER remove link underline // 
footer.sections * {    
  text-decoration: none;    
  background-image: none !important;}
// FOOTER remove link underline // 

FOR SQUARESPACE 7.0

Sitewide

// Removing link underline // 
a {border: none !important;}
// Removing link underline // 

Footer only

// FOOTER remove link underline //
.footer-blocks a {border-bottom: none !important;} 
// FOOTER remove link underline // 

---

Bonus snippets for Squarespace 7.1

Header Social Icon Spacing

Sometimes I get very annoyed at the spacing of the social icons. With the code below you can adjust the spacing between header social icons and avoid the header’s universal spacing.

You can adjust the margin px values to your liking. The higher the px value, the more padding between each social icon.

// Header Social Links Spacing //
.header-actions-action--social .icon {
  margin: 0px 7px !important;}
// Header Social Links Spacing //

Text Highlight Color Selection

This is one random and fun!

To change the highlight color itself, edit #COLOR to any hex code you like 😀!

To change the text color when highlighted, switch the color values #FFFFFF to the hex code of your choice.

// Text Highlight Selection Color //
::selection {
  background: #COLOR;
  color: #FFFFFF;}

::-moz-selection {
  background: #COLOR;
  color: #FFFFFF;}
// Text Highlight Selection Color //

---