Choose from 3 different code snippets to add a background image, GIF, or video to the mobile overlay menu in Squarespace.

In this series, we’ll explore two different setups for adding icons to the links in your main nav. The first will be a CSS-only setup, but it comes with the caveat that it’s not very flexible with different color themes. The next is my preferred method, which is the javascript setup. With this setup, I inject SVG icons into the header which are much more dynamic with different color themes.

This code snippet should be in everyone’s code snippet library. It allows you to show one section on mobile and a different one on desktop. This is great for fine-tuning page sections for specific screen sizes.

Let’s build a read more component with no javascript whatsoever.

Here is a fun little design for a featured product on your products collection page in Squarespace.

Media queries let us get really targeted with our CSS. Here are the 3 most important media queries that I use when coding.

Move an accordion block in the Additional Info area into the Product Details area.

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.

The pagination at the bottom of blog posts can be a little close to the footer. Let’s learn how to adjust the pagination spacing on blog posts on desktop and on mobile.

Lessons in index card entrepreneurship from a yard man.

Christy Price and I are doing an “Ask Us Anything” webinar on Oct 6th and I would love to see you in there! These webinars are info-packed, fun, and live discussions where we answer as many as your questions as we can. Register here, and ask a question in the Q&A tab. Even if you can’t make it live, you can still watch the replay!

There’s a special kind of fun that happens when you meet people you’ve only ever interacted with virtually. 3D!

In this tutorial, I’m going to build a sidebar for on my blog posts using a little Javascript and CSS. The method and code used in this tutorial can be used to create sticky columns anywhere on your website that uses a classic editor.

Here are some methods to get remove that date right before the description in the Google Search Results Page.

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.

FYI, this article is about my dog. Not coding or Squarespace.

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.

Squarespace is releasing a new layout engine that allows for completely new designs. It’s called “Fluid Engine” and gives website builders much more control over the layout and positioning of elements. However, there are some things you need to know.

Play a portion of your video when you hover over a video block in Squarespace. In this tutorial, I’m going to show you how to display a GIF when a user hovers over a video block.