Adjusting sizes with length values

Common Length Values in Custom CSS

When you're writing custom CSS for Squarespace, you need to tell elements how big or small to be. That's where length values come in. They define measurements—like how wide a border should be, how much padding to add around text, or how tall a section should stretch.

There are five main types of length values you'll use: px (pixels), rem and em, vh (viewport height), vw (viewport width), and % (percentages). Some stay the same no matter what device someone's using, while others adjust based on screen size or other factors. Knowing which one to use makes your code cleaner and your site more responsive.

Example: Adding a border with pixels

Let's start with the most straightforward length value: pixels, or px. Pixels are fixed units that stay consistent across all devices.

If you want to add a 2-pixel border around a content block, your code would look something like this code example.

That border will be exactly 2 pixels wide whether someone's viewing your site on a phone, tablet, or desktop monitor. Pixels work well for small, precise measurements like borders and padding; things where you want exact control and consistency.

To learn more about borders, check out this article: insidethesquare.co/guide/border

#block-1234 {
border: 2px solid black
}

Common Length Value Types

Pixels (px)

Pixels (px) are absolute values. They don't change based on screen size or user settings. 1px represents one pixel on a screen, which technically equals 1/96th of an inch. If you set something to 200px wide, it's 200px wide everywhere—on mobile, tablet, and desktop.
Use pixels for details that need to stay crisp and consistent: border widths, small spacing adjustments, icon sizes, or box shadows. Avoid using pixels for major layout elements like section widths or font sizes, because they won't scale responsively.
Root EM (REM)

Rem stands for "root em," and it's based on your site's root font size. In Squarespace, that's usually 16px by default (though you can adjust it in your site styles). So 1rem typically equals 16px, 2rem equals 32px, and so on.
The advantage of rem is that it scales. If someone increases their browser's font size for accessibility reasons, anything sized in rem will adjust proportionally. This makes rem perfect for typography-related spacing—things like padding around text, line height, margins between paragraphs, or letter spacing.
You can use decimals with rem for precision: 0.5rem would be half the root font size (usually 8px), and 1.25rem would be 20px.
EM

Em works similarly to rem, but instead of being based on the root font size, it's based on the font size of the parent element. If a parent element has a font size of 20px, then 1em inside that element equals 20px.
Em can get tricky because it compounds—if you nest elements, the em value keeps recalculating based on each parent. For this reason, most developers prefer rem for consistency. But em is useful when you want spacing or sizing to scale specifically with a particular element's font size.
Viewport width (vw) & viewport height (vh)

Viewport width (vw) and viewport height (vh) are relative to the browser window size. 1vw equals 1% of the viewport's width, and 1vh equals 1% of the viewport's height. So 50vw would be half the screen width, and 100vh would be the full screen height.
These are perfect for creating full-screen sections or elements that need to scale with the browser window. A hero section set to 100vh will always fill the full height of the screen, no matter what device someone's using.
Percentages (%)

Percentages (%) are relative to the parent element's size. If a parent container is 800px wide and you set a child element to 50%, that child will be 400px wide. Percentages are incredibly useful for responsive layouts because they automatically adjust as their container changes size.
Use percentages for column widths, image sizes within containers, or any time you want an element to take up a proportional amount of space rather than a fixed amount.

Pro Tips for Custom Gradients

Match the value to the job → Use px for small, fixed details. Use rem for typography and spacing. Use vw/vh or % for responsive layouts. Mixing them strategically gives you both control and flexibility.
Rem is your friend for accessibility → When you size things in rem instead of px, people who adjust their browser's default font size will have a better experience. This is especially important for spacing around text.
Avoid em unless you need it → Em can create confusing compound effects when elements are nested. Stick with rem for most use cases—it's more predictable.
100vh can cause mobile issues → On mobile browsers, 100vh sometimes includes or excludes the address bar depending on scroll position, which can create layout jumps. If you're using vh for mobile layouts, test thoroughly.
Percentages need a defined parent → If the parent element doesn't have a defined width or height, percentages won't work as expected. Make sure the container has a size for % values to calculate from.
Combine values for precision → You can use calc() to mix different units together, like width: calc(100% - 40px); to create a full-width element with fixed margins.
Start responsive, adjust fixed → When building layouts, start with responsive values like % or rem, then add px adjustments only where you need exact control.