Squarespace CSS tricks

The Blog

Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!

And if you can’t find what you’re looking for:

All CSS tricks, 7.0, 7.1, Hover/overlay Beatriz Caraballo All CSS tricks, 7.0, 7.1, Hover/overlay Beatriz Caraballo

One-way sliding underline on hover for button blocks (7.0 & 7.1)

We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today! The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect. The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time. So, let’s get started!

Read More
All CSS tricks, Customization tips, 7.0, 7.1, Learn code Beatriz Caraballo All CSS tricks, Customization tips, 7.0, 7.1, Learn code Beatriz Caraballo

5 tips to troubleshoot your Squarespace code

In today’s video, I want to share with you 5 different things you can look for when the code you added to your client’s Squarespace site isn’t working. These troubleshooting tips cover a vast majority of the issues you’ll encounter when using code in Squarespace or any other platform, so let’s jump right in!

Read More
Mobile design, All CSS tricks, Customization tips, 7.0, 7.1 Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, 7.1 Beatriz Caraballo

How to adjust your page/index section height on mobile

If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…

Read More
All CSS tricks, Customization tips, 7.0, 7.1, Full width Beatriz Caraballo All CSS tricks, Customization tips, 7.0, 7.1, Full width Beatriz Caraballo

How to make any block full width in Squarespace (7.0 & 7.1)

So, your client’s design includes some blocks that should be displayed in full width, while others stick to the boundaries of the site. And you’ve been trying to make that happen for the past couple of hours (days?) without luck? If so, then today’s tutorial is for you!

Read More