The 3 CSS Tweaks I Use on Every Squarespace Website Design

Squarespace does SO much. But there are some things it just can’t do…and some things that may make you look a tad unprofessional. Fortunately enough, these minor issues can be fixed with a little CSS!

It’s important to note that these tricks can be used for ALL types of websites – whether you’re a copywriter, brand designer or something else entirely. I use them on every website I design, and they’re so integral that it’s actually the first thing I do.

To start adding custom CSS to your Squarespace website, go to the Custom CSS Editor. This is the place where you’ll be able to override the Squarespace style editor with your own CSS.

Navigate to Design > Custom CSS.

1. Removing Hyphenation

I can’t stress this enough. Hyphens. Look. Ugly. Nobody wants to read a website with unwanted word breaks all over the place, especially on mobile. Squarespace doesn’t have a fix for this in the style editor, so Custom CSS is our new best friend.

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

2. Custom Blog Post Width

There are a lot of fantastic blogs out there, and having such a wealthy source of FREE knowledge can do wonders for your business, especially when you’re first starting out. But the downside to many blogs I read (and often don’t finish reading) is their width. It is a pain to read through huge chunks of text when it’s stretched from one side of the screen to the other and can put people off pretty quickly. Luckily, there’s a fix!

.BlogItem { 
  max-width:750px; 
  margin: 0 auto;
}

3. Hide the Header and Footer

Often when you have a page with a specific goal – like a landing page – you want to give people as few choices as possible. This helps to guide them into taking the action you want. Having a header or footer on these pages is more than a hindrance than a help, because it gives them more choices and therefore chances to click away.

Hiding them means the viewer can only get off the page by taking the ONLY action available on that page or clicking back. There are a few steps to getting this right, but it’s super simple to follow and will take all of a few minutes.

1. Build out the page.

2. Download a wonderful Chrome Extension called Squarespace ID Finder. This extension helps to identify the ID Number for each block in Squarespace.

3. Once it’s installed, you should see a little icon in the top right corner of the browser.

4. Navigate to your page.

5. Click the Squarespace ID Finder icon to reveal all your ID Numbers.

6.    Click the YELLOW number to copy it to clipboard. This number is the page ID, and what we’ll use to remove the header/footer.

7.     Paste the following code into Squarespace:

#collection-numbergoeshere {
      header, footer {
             display: none !important;
     }
 }

8.     Replace #collection-numbergoeshere with the ID Number you just copied.

Aaaaand that’s it! I hope you liked these tweaks as much as I do. I find them super helpful when starting a new website, because I know that things will look good before I start building.