Coding Responsively: Length Values

Jan 24

Squarespace is a responsive website builder, which means it automatically adjusts the layout and size of your content based on the screen size your visitor is using. When you’re customizing your site with code, it’s important to use the right type of length values for the responsive parts of your site!

This article walks through the four main types of length values you’ll run into when adding custom code in Squarespace: px, %, vw/vh, and rem. Let’s break them down!

Absolute length values are the same on every device. PX is the most common one, and it represents one pixel, or 1/96th of an inch. If you set a button to be 200px in width, it will be 200px on a laptop, 200 px on a mobile phone, and 200 px on a tablet.

You get the idea. 😉

It’s an absolute length because it’s absolutely the same everywhere ––no if’s, no buts, no coconuts.

I don’t recommend using PX for sizing major things, but minor ones instead like the width of a border.

Here’s where things get even cooler. REM stands for "Root EM," and it’s based on the base or root font size of the site. Usually 16px by default in Squarespace, but that can be adjusted inside the font section of your site style menu.

1rem = the font size set on the root element, so 1rem usually equals 16px.

Why use rem instead of px?

It’s scalable: If a user increases their browser font size for accessibility, elements using rem will adjust.
It’s great for typography, and adding minor adjustments for line height, padding, & spacing to text containers in clean, responsive layouts.

Pro tip: You can still use decimal values like 0.75rem or 0.125rem for smaller elements.

Relative values are a lot more common in Squarespace codes because Squarespace itself is a responsive website building platform.

Ya know how it automatically resizes, reshapes, and changes the layout when your screen size gets smaller? It does that by using a relative length value for a lot of things.

Percentages are common in Squarespace sites, but so are VW and VH. VW stands for view width, while VH stands for view height.

If you want a button to take up 80% of your screen, you set it’s width to 80%.

That means it will be pretty big on mobile, and ginormous on desktop.