Let’s code
Explore fixes, CSS tricks and coding tips, to implement on your Squarespace projects.
Logo resizing animation on scroll in Squarespace 7.1
Learn how to create a big-to-small shrinking logo effect in Squarespace 7.1 using only CSS. This tutorial walks through positioning, scaling, and triggering the animation on scroll using the built-in .shrink class
Bring up the Auto Layout Carousel mobile arrows on tablets
Learn how to show the bottom mobile arrows on tablets in Squarespace 7.1 for Auto Layout Carousels. This tutorial walks through hiding the desktop arrow container, displaying the mobile controls, and applying everything within a custom media query at the exact breakpoint of your choice.
(Part 3) Force code to work ONLY during Edit Mode, not the Live Site in 7.1
In Part 3 of this Squarespace 7.1 tutorial series, we’ll look at how to apply custom CSS so that it runs only in Edit Mode and not on the Live site. By targeting the .sqs-edit-mode class, you can create backend-only styling that helps with troubleshooting, or temporarily highlighting hidden elements, without affecting the Live site.
(Part 2) Stop code from working in the backend of a Squarespace 7.1 site
Learn how to stop custom CSS from working in the backend of Squarespace 7.1 while keeping it active on the Live Site. In this tutorial you’ll learn how to use .sqs-edit-mode and the :not() pseudo-class to control when your code applies. Let’s do it!
(Part 1) Disable code automatically while editing a Squarespace 7.1 site
Learn how to apply custom code only while in Edit Mode or only on the Live Site in Squarespace 7.1. This tutorial will show you how to use .sqs-edit-mode, .sqs-edit-mode-active, and the :not() pseudo-class to control when your CSS runs and when it shouldn’t. Get started with the first part!
Fixed background image effect for sections in Squarespace 7.1 (aka, Parallax)
Squarespace includes a native parallax option, but if you’ve ever used it, you’ve probably noticed that background images still move, just more slowly than the rest of the content. If what you’re really after is a completely fixed or layered background effect, the native tools won’t quite get you there.
In this tutorial, you’ll learn how to create a true fixed-background parallax effect in Squarespace 7.1 using CSS only. We’ll replace the section’s default image behavior, pin the background in place, and allow the content to scroll smoothly over it.
Show adjacent slides on mobile for 7.1 Auto Layout Carousels
In this tutorial, you’ll learn how to bring the desktop adjacent slides effect for Auto Layout Carousels to mobile. We’ll walk through how Squarespace controls overflow on small screens, why adjacent slides disappear, and how to override those rules without affecting the desktop layout, just with CSS.
Quick Masonry layout for Product pages in Squarespace 7.1
Want to create a Masonry-style product layout in Squarespace with CSS? In this tutorial, you’ll learn how to do that by using column-count to condense the spacing, override the native grid, prevent item breaks, and make the layout fully responsive across desktop, tablet, and mobile devices.
Multiple aspect ratios for Product page images in Squarespace 7.1
Squarespace Product pages don’t support mixed image aspect ratios at the moment… but CSS does.
This tutorial shows you how to remove the forced crop, restore native image proportions, and make sure everything works on the live site (not just in edit mode!).
Custom button for Portfolio items in Squarespace 7.1
Want to add buttons to your Squarespace Portfolio items with a simple CSS trick?
This method will show you not just how to create custom buttons, but also how to sync them with your existing button styles using Squarespace variables. Take a look!
Easy custom cursor for specific elements or sections in Squarespace
Learn how to add a custom cursor to Squarespace, but display it only where you want it to show.
This tutorial walks you through how to target specific elements or sections using just three lines of CSS, so you can implement a quick interactive modification to client sites in a few minutes.
Custom arrows for Summary Block Carousels in Squarespace
Learn how to replace the default Summary Block Carousel arrows in Squarespace with custom image-based arrows using CSS. This tutorial breaks down the structure of the carousel controls and shows how to override them cleanly and easily.
Squarespace 7.1 Auto Layout Lists: Spotlight Hover Effect
Learn how to create a spotlight-style hover effect for Auto Layout Lists in Squarespace 7.1 using CSS only. This subtle interaction fades surrounding cards while keeping the hovered card in focus!
Highlights: The Website Designer Summit 2025
If you’re a Squarespace designer, you may have heard about the second edition of Liz Ellery’s Website Designer Summit that just took place yesterday, February 27, 2025. Aaand if you’re a VIP of my email list, you most certainly did! However, if you did not get a chance to catch it – nor have watched the replays – I want to share with you the truth-bombs, golden nuggets and overall amazing insights the speakers casually dropped in their presentations and talks.
Creating a scrolling text header button in Squarespace (7.1)
Want to make the header button of your Squarespace project unmissable? Then why not turn it into a mini scrolling marquee with today's CSS trick! Let's get to it.
Removing the space under code blocks in Squarespace when using Fluid Engine (7.1)
Want to get rid of the extra space under that code block in Squarespace 7.1 where you just added a widget with a script? Ok! Let’s do it.
Keeping centered navigation links in one single line, in Squarespace (7.1)
Struggling to keep your 7.1 navigation links in one single line? Not anymore! With this week’s CSS trick you’ll be able to fix that little issue in a hearbeat.
How to center-align the last two items of a Portfolio page in Squarespace (7.1)
For this week’s CSS trick, we’ll be using the same grid-altering method from a previous tutorial but with a small modification to the way we target those last two slides so that, if you or your client have a ton of items, you don’t have to count them all.
How to create “Read More” dropdowns inside Auto Layouts (7.1)
Have you ever wanted to show/hide information inside the description area of Auto Layouts in 7.1 on click? If yes, you won’t want to miss out on this tutorial!
Styling and bottom-aligning ‘Read More’ links for the Basic Grid Blog in Squarespace (7.1)
Want to style the basic grid blog Read More links in Squarespace 7.1? Then today’s CSS trick is the one you’ve been looking for! Check it out.