Custom CSS Every Squarespace Website Needs

Custom CSS Every Squarespace Website Needs

There are two pieces of custom CSS I add to every Squarespace website I build. To add these code snippets, navigate to Design > Custom CSS, paste the code into the white box and save.

Custom CSS Menu in Squarespace

Remove Hyphens in Squarespace

You’ve been there… your website text looks amazing! Then you pull up your site on your tablet or iPhone and… ugh. There are hyphenated words all over the place. This quick code removes hyphens to make your text look great again.

/* remove hyphens */

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

Reduce the Size of Copyright Text in Squarespace

By default, Squarespace makes the Footer text the same size as your body text. I prefer my Copyright line to appear smaller. For this code, you’ll need to figure out the Block ID that your copyright appears in.

If you’re looking for Block IDs more than once or twice, this Chrome plugin is worth installing. Otherwise, you’ll want to inspect the source code. (Make sure to do this when you are NOT in the Site Styles menu area.) For Chrome, open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools. Right-click on your Copyright and select Inspect Element.

inspecting source code on Chrome

You’ll see your copyright with a line above it that includes something like id=”block-yui_somenumbers”. Copy what’s in those quotes and use it in the code below. Again, you’ll be pasting this in the Custom CSS for your website:

/* reduce text size of copyright */
#block-yui_3_17_2_64_1490968954157_6649 {font-size:smaller;}

Those two Custom CSS snippets I use on virtually every site I develop. For Brine family templates, I add one more:

Remove Bar on Mobile Footer in Squarespace

For Brine-family templates (Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West) the mobile view has an option to include footer navigation or contact info. If you don’t choose to use these, then an empty (usually gray) bar appears at the bottom of your mobile site. To remove it, add this to Custom CSS:

/* remove gray bar on mobile footer */
.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}

If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.