Prevent your logo from clashing with the background color of your mobile menu. Use this quick CSS snippet to replace your logo when the mobile menu is open.

In this tutorial, I’ll show you how to build anchor links so that your header doesn’t cover the text you’re scrolling to. In this example, I’ll build a table of contents for a blog post. There is a part 2 to this tutorial to make the sidebar sticky.

Fluid Engine makes possible many more layout options in Squarespace. However, there is a major spacing problem when viewing a website in tablet mode. Let’s take a quick look at what’s causing it and how to fix it.

In this shamelessly-clickbait-titled video, I talk about the top 5 things that, once I learned them, helped make building in Fluid Engine much easier. If you’ve been beta testing Fluid Engine for the last few months, you probably know most of these, but I bet there are a few nuggets in here that’ll help you out.

If you’re building a custom Squarespace website, you’ll surely be adding Custom CSS. In this article, I’m going to go over some best practices for maintaining clean and organized code in your custom CSS area.

Learn the different types of comments you can add, and where you can add them, on your Squarespace website.

Handy little trick to switch between HEX, HSL, & RGB color values in the web inspector. Check it out on my Instagram page.

Anchors links allow you to jump to a specific section of a page. But they can present a problem if your header is fixed to the top of the screen. When you jump to an anchor, the text can get covered by the header. This trick fixes that.

In this tutorial, let’s talk about the ways in which we can add Custom CSS to a Squarespace site and the benefits / tradeoffs of each of these options. There are 4 main places you can add CSS onto your website:

1. The Custom CSS Area

2. The Page Header Code Injection Area

3. Code Block

4. Site Header Code Injection Area

Let’s switch the date and month fields from MM/DD/YYYY to DD/MM/YYYY. Us American’s (as well as a few other stragglers) are sticking to our confusing date configurations. And as long as Squarespace doesn’t update their form date fields, you will also have to deal with it.

Let’s build a loading animation that automatically imports the favicon (browser icon) of your website and makes it bounce (through CSS animations) until the page is fully loaded.

In this tutorial, we’re going to make a clickable thumbnail over any Section in Squarespace 71. This is great for making the entire slide on my sliding image banner a link.

In this tutorial I walk you through, step-by-step, building a Scroll To Top button. If you just want the code though, you can just copy and paste that.

Finding and using CSS that others have shared is a key skill in becoming an expert web designer and developer. So in this tutorial. I’m going to show you how to apply the code, that Polypane has shared, to a few images in Squarespace, specifically, to Summary Block images & Image Block images.

Let’s say you found an awesome plugin that makes your summary blocks look amazing, like this one on Ghost Plugins. However, you only want it to apply to one summary blocks. How do you do that? In this tutorial, I’m going to explain what a “Block ID” is, how to find it, and how to use it to apply code to just one block in Squarespace.

✓ Super Easy Installation
✓ Edit The Content in Your Accordion without Code
✓ Customizable CSS
✓ Multiple Accordion’s Per Page
✓ Mobile Friendly

In this tutorial, I’m going to go over how to build some basic accordion dropdowns for Squarespace. This will work in any Squarespace template. I also have a plugin available for whoever doesn't want to get into the code of it all.

✓ Super Easy Installation
✓ Edit The Content of Your Tabs Normally
✓ Customizable CSS
✓ Multiple Tab Groups per Page
✓ 3 Designs To Choose From
✓ Mobile Friendly

✓ Super Easy Installation
✓ Great for Gallery Sections
✓ Edit The Content of Your Sections Normally
✓ Customizable CSS
✓ Multiple Tab Groups per Page
✓ Mobile Friendly