6 game-changing CSS tweaks for your Squarespace website
Let me preface this post by saying, I’m not a web-developer and I can’t custom code your site from the ground up. In fact, I’d really prefer not to ever learn that exact skillset, myself. My interest is in the design & visuals of the site, not the backend.
I use Squarespace for myself & for my clients because it allows me to focus on the design & leave the backend coding, site security and more to the Squarespace gurus.
My clients love being able to edit their site themselves as needed; a fabulous bonus for small businesses who don’t want to have a whole team dedicated to building & maintaining their online company-home.
That being said, I still use some coding to tweak the sites I build and today I’m sharing with you how to get these 6 game-changing CSS tweaks for your site.
Where & How
I stumbled upon this uber-quick course on Skillshare one day (not kidding, you can knock it out in like 30 minutes, including CSS install time) by Kyle Domer* that fixed several nit-picky things I’d been battling on my own site after switching templates.
Affiliate Note: this post technically contains affiliate links; if you sign up with any of the links to take his course I’ll get a free month of Skillshare, but I’m NOT sharing it for any affiliate perks. I’m sharing it because it’s worth sharing & it’s genuinely helpful. I signed up for a trial of Skillshare JUST to get this code from him & I think it’s worth that for you too. Already a Skillshare Member? Then what are you waiting for?!
If you’re thinking, you don’t know anything about code, then it’s still okay to handle this. As Kyle says in his course Intro video (which you can watch on his course page before signing up), you don’t even have to know what CSS is for this to work. He’ll walk you through adding it to your site with the tutorial videos in the course, and the copy-and-paste code he gives you in the download.
That being said, please note that if you have a newer Squarespace site, you’ll need (I believe) at least the 2nd tier personal plan or higher in order to add CSS to your site. I don’t believe their Personal plans allow CSS customizations anymore.
What
Okay, so here’s what’s in the course & why I’m recommending it here (rather than just giving you the code, because it’s not mine to give in this case).
*All of the images below are screenshots from his course intro video, playable before you sign up for his course so you can see the changes in action (super fast though), and each pic links back to his course page to give him credit for the image & for your convenience if you want to take it.
01. horizontal rule styling
This super short code snippet helps ya style that damn line block, when your template doesn’t have settings for that. Wanna change the color? The thickness? Length? You got it here.
BEFORE
AFTER
02. wrap grid titles
This one tells Squarespace to wrap all the titles for your gallery block grids. No more cutting them off with an ellipses. It’s. About. Time.
BEFORE
AFTER
03. button widths
Want a more streamlined look to your buttons? Control the width of each button block size with this code. (Be wary of how this adjustment looks across all 3 screen sizes though!)
BEFORE
AFTER
04. remove hyphenation
This one was the main reason I took the time to sign up for a free trial of Skillshare in order to get this course.
This removes all the auto-hyphenated words & wraps text appropriately, throughout your Squarespace site! This fixes those text blocks that looked great on Desktop view and maybe even Tablet size view, but sucked on the Mobile view. #worthit
BEFORE
AFTER
05. force single image rows (on mobile grid galleries)
This one may be helpful, but might also depend on what your gallery contains. If you happen to want to make your grids show in single rows rather than double on mobile view, this code snippet will work for you.
There’s no before image for this in his intro video, but here’s the after.
AFTER
06. center image captions
My 2nd favorite! There’s seemingly no setting for this in the style editor/design styles area, sadly. This code fixes that. No more auto-left-aligned captions for your images.
BEFORE
AFTER
Need some tweaks to your site?
Work with me for a day!
