Have you ever wondered if there’s a way to customize Brine’s overlay menu juuuust a little bit so that it looks more on-brand with your client’s site? If you’re nodding your head right now, then this tutorial is for you!

For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!

Let’s take a look at another cool way you can use code in your client designs to make things look more, for a lack of a better word, “editorial” using the Overlap Image Block.

If you have your blog pages on Brine set to 3 or more items per row in desktop, chances are you’re not entirely happy with the end result on smaller screens. Particularly, if you have thumbnail + title + metadata + excerpt showing, your lovely desktop layout is probably squishing up in tablets. So, why don’t we do something about it?

Today we’ll be addressing a quick CSS trick that you can implement on any Brine template, whenever you want to highlight even further your client’s ACTIVE menu links. Let’s get to it, shall we?

There are different ways to create a vertical navigation in Squarespace, and in this particular tutorial we’ll be tackling one for the Brine template that’s fixed to the side of our screen, doesn’t require a code block or any sort of HTML, and doesn’t touch our primary or secondary navigation either.

I know you’re here to find out how to FINALLY achieve this customization because although you may have found a way to add a background color to your blog page items, it’s been tricky trying to make them have the same height, without manually setting one that only works if you don’t reduce your screen size.

Today’s CSS trick is short and sweet. If you’ve been wanting to add a little folder indicator/icon to your link folders on your desktop header, here’s a quick way to achieve it with a bit of code!

Looking to create a different kind of testimonial block on your Squarespace site? Then today’s tutorial is for you! We’ll be using a collage block to create a really neat customization that can help you display your client testimonials in a unique way.

Today we’ll be tackling an issue that becomes particularly annoying when for some reason card, overlap, and collage blocks make it really hard to vertically align your content to the center of the image… completely ignoring your Site Style settings.

In today’s post, we’ll be looking at what you can do when your menu navigation is readable over certain banners but not over others, without having to add a background color to it or changing the images altogether.

You’ve probably seen inspirational websites on Pinterest *cough* Showit sites *cough* that include images with overlapping titles or phrases, that look slightly tilted. In Squarespace, you can absolutely achieve that look by simply adding the text to the image itself, but let’s see if we can achieve it without relying on Photoshop…

This CSS trick is great for designs where you want to add an image, icon, logo or any other sort of detail to the footer of your client’s site, without having to stay within its boundaries. Let’s jump right into it, shall we?

If you’re into overlapping stuff in your client sites, I know you’re going to really enjoy today’s fun tutorial. It’s all about taking the overlap image block design one step further, with very little code, to create a look I’m 90% sure you’ve seen before while perusing Pinterest: an image with an overlapping title, a secondary title, text and an overlapping button.

Have you ever wanted to center-align text inside your footer in smaller screens while keeping it left or right-aligned in tablets and desktop? The process and code are quite simple BUT, particularly when you originally have text aligned to the right there are additional steps required to have full control over the mobile result.

Learn how to fix the most common and annoying issues on your Squarespace site that pop up on smaller screens, without affecting your desktop layout.

When you’re working with the Brine template, and you’re using the bottom header, the navigation can overlap nicely over banner images, but that means you have to settle for a “backgroundless” header in all of the non-banner pages… or do you?

I want to walk you through a nifty little CSS trick that you can use to rearrange your gallery block grid images in smaller devices, so you can choose how many thumbnails or slides to display per row!

You may already be using a custom font for headings across your client’s site. But, you’re not sure how to add it to your nav items for both your regular navigation AND your mobile menu. Let’s see how that can be done, shall we?

This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.