Let’s create that sticky content navigation you’ve been wanting to add to your client’s site, in 2 different ways!

In today’s post, we’ll be tackling a quick fix to help you even out the misalignment on those thinner index/page sections, where there’s only one block involved.

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…

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!

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…

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…

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!

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!

If you’re working with indexes in Squarespace, you may be wondering how the heck to make your blocks float between two of the sections. If that’s you, stick around ‘cause that’s exactly what we’ll be doing today!

Today we’re going to be taking advantage of the grid layout of an Index Gallery to create big and bold category thumbnails that you can use to showcase your different service packages, blog categories, photo galleries, or pretty much anything else you want!

You’re using a gorgeous background image for your banner, and you have the perfect catchy headline to go on top of it. You start by using spacers, trying to find the perfect placement for your lovely headline on top of the image, in a way that looks 100% readable…

If you’re using one of Brine templates, or pretty much any other template in Squarespace, you’re most likely wanting to make the best out of their banner sections. These can be used in many creative ways to add an extra touch of “huh… I wonder how they did that?“ …

To edit just ONE banner in your Five template you can either add your code inside your chosen page's header or target the corresponding page's ID in your Custom CSS window. In this tutorial, we'll see how to do it with the page's ID to change the…

It seems like one of the most common struggles DIYers and designers alike have when creating a site in Squarespace, is finding out how to make changes to a specific banner on their site. In today's post, I'll show you how to style a specific index…