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…

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…

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…

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!

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…

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!

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!

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!

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?

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.

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.

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.

If you’re using blog pages on your client site for different purposes, you may want to be able to customize the content (posts) of just ONE of those blog pages and not the other. A very common situation is when you have a blog page as an actual blog, and another blog page as a portfolio to showcase previous work.

You know when you’re loading your site and you see a flashing or fade-in background color before the content on your page fully loads? This may not be happening on all of your pages – or even if you’re using a template outside the Brine family – but…