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:

Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)

If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!

Read More

Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)

In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!

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
All CSS tricks, Customization tips, 7.1, Title/caption Beatriz Caraballo All CSS tricks, Customization tips, 7.1, Title/caption Beatriz Caraballo

Add multi-line descriptions to any Gallery Section in 7.1

In today’s post, I want to show you a super easy workaround to display a title AND a short description in your 7.1 Gallery Section captions! This little trick works for all of the different Gallery Section layouts, but we’ll be breaking down the logic behind the tweak for the Slideshow: Reel layout.

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