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!

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!

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!

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!

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.

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!

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!

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?