Custom CSS Every Squarespace 7.0 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.
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.
Update: Squarespace 7.1 now includes this in their base code. But if you are building in 7.0, you’ll still want to add this.
/* 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.
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;
}