The Codebase
Browse all Resources!
Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.
Add multi-line descriptions to any Gallery Section in Squarespace (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.
Adding a fun twist to poster blocks (7.0 & 7.1 CE)
Recently, I was testing a couple of customizations in 7.1 and ended up with a pretty cool one that I’d like to share with you today!
How to adjust your page/index section height on mobile (7.0 & 7.1 CE)
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…
Create quick jumps or anchor links in Squarespace (7.0 & 7.1)
Today's code trick is all about how to create quick jumps (aka anchor links or anchor points) in Squarespace 7.0 and 7.1, using index pages or regular pages. AND how to stop your fixed navigation from getting in the way…
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!
How to create responsive equal height columns in Squarespace (7.0 & 7.1 CE)
Spacers, image blocks, fixed height, and min-height values. Those are just a couple of workarounds that help a little bit when trying to create 3 equal-height columns inside a client’s site. However, there’s a better way…
Why your Google Font isn't showing up in your Squarespace site on mobile (7.0 & 7.1)
Today we’re taking a closer look at the reasons why your Google Font may not be showing up on your Squarespace site on mobile, and what you can do to fix it!
Simple pricing tables without HTML (7.0 & 7.1 CE)
So, you’re working on a client site and are looking to showcase their different service/product packages via pricing tables, but don’t want to use HTML? Then take a look at a simple alternative!
Creating a simple hover mode for Gallery Strips (7.1)
We’ve covered different kinds of hover modes for blocks on this blog, but we haven’t yet touched page sections like the Gallery Sections from Squarespace 7.1… until now.
Customizing multiple index sections at the same time (Brine 7.0)
Brine makes customizing our client sites fairly easy by allowing us to use the URL slug as the index section ID, so we can quickly target things in our CSS. However, when there are multiple index sections involved, it can become time-consuming and repetitive to write the same customizations for each area over and over again…
Vertically aligned 3-column footer layout in Brine (7.0)
We’ve tackled footer customizations before but, this time, we’ll be looking at how to create a lovely vertically-aligned column layout in Brine, that includes the actual Footer nav vs manual links!
Turning a header into outline text in Squarespace (7.0, 7.1 cE & 7.1 FE)
Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!
Adding an image to buttons in Squarespace (7.0, 7.1 CE & 7.1 FE)
Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!
Resizing banners on mobile in Squarespace (Brine 7.0)
One of THE most frequent questions I get involves resizing index page banners on smaller screens. So, even when this may not be a perfect solution for all of your designs, today I’d like to share with you a fairly simple workaround that can give you WAY more control over this issue!
Creating a subtle divider for Brine's bottom header (7.0)
You know those pretty and elegant headers on Pinterest where the whole nav is over the banner image but it’s subtly separated by a line that doesn’t quite reach the edges of the site? Well, for today’s CSS trick we’ll be looking into how to create that for Brine’s bottom header!
Creating a "melted" navigation in Squarespace (Brine 7.0)
To celebrate the beginning of summer, I thought I’d share with you a quick customization that you can adapt for your client’s design to give its nav a really awesome, “melted”, look!
Animating the logo on hover in Brine (7.0)
CSS is not always fun and games but sometimes it can be! For today’s cool CSS trick, we’ll be looking at how to create an animated logo on hover, in Brine, with a pretty simple approach!
Creating an off-center animated background for collage blocks (7.0 & 7.1 CE)
In a previous post, we saw how we could tweak the collage block with veeeery little code to give the content side a nice border. But, today, I want to show you how we can take that tweak to the next level with the help of our friend: the pseudo-element.
5 most useful types of page ID in Squarespace (7.0 & 7.1)
Let’s take a look at 5 of the most useful types of Squarespace ID we can use in our projects to customize specific areas or pages of our site!
Adding a fixed background to your Squarespace site (7.0 & 7.1)
Have you ever seen those gorgeous site examples where everything seems to just float on top of the background image while scrolling? Well, if you’ve been inspired by them at some point and would like to implement the look in your client’s design, today’s tutorial is for you!