Let’s code
Explore fixes, CSS tricks and coding tips, to implement on your Squarespace projects.
Styling and adding a description to the Title of List Sections in 7.1
Want more control over your Squarespace list section titles? In this tutorial, you’ll learn how to create separately styled titles and descriptions using only CSS. By combining bold formatting with targeted selectors, you can turn a single text field into a fully customizable heading and description layout for Carousel, Banner Slideshow, and Simple List sections.
Inverted content and media for Auto Layout Carousel cards in 7.1
Want to apply the “Content First” look of simple lists to your Auto Layout Carousel slides in Squarespace 7.1? In this tutorial, you’ll learn how to invert the order of the carousel slide’s content, button, and image using just a few lines of CSS.
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.
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.
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!
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!
How to center-align the last two slides of an Auto List in Squarespace (7.1)
Want to center-align those last two slides inside your client’s Auto List section? Then take a look at this easy CSS trick to make it happen!
Autoplay and Ken Burns effect for the Auto Layout Banner Slideshow (7.1)
Today, we'll be diving into Auto Layouts once more, but this time we'll be tackling how to make the Banner Slideshow autoplay and tweak its native transition just a tad to build a lovely Ken Burns effect.
How to make Auto List items fully clickable in Squarespace (7.1)
If you want to make your 7.1's Auto List items go to your chosen link when ANY part of the card is clicked vs. linking only through the button, this CSS trick is going to show you how to make that happen!
Changing the number of slides per row for Squarespace Auto Layouts on smaller screens (7.1)
Let’s take a look at how we can control the number of items displayed on mobile when working with the Auto Layout List in Squarespace 7.1!
How to create a hover mode for anything in Squarespace
In this week's video, we'll be looking at the steps behind creating a hover mode for anything you want in Squarespace. Sounds good? Then let’s jump right into it!
Minimal testimonial carousel using an Auto Layout in Squarespace (7.1)
This week we’re back with another Squaresapce Auto Layout customization! We’ll be looking at how to achieve a lovely minimal look for a testimonial carousel, with just the right amount of CSS. Check it out!
Creating a bold side-by-side slideshow in Squarespace, using auto layouts (7.1)
Squarespace’s auto layouts are really growing on me, so today I thought I’d share with you a cool customization I came up with the other day, using the Slideshow option. Take a look!