BEYOND THE BASICS

Length Value Types

↓ DOWNLOAD THIS ARTICLE AS A PDF

Absolute Values: same on every screen size

PX is an ideal example, used for borders, outlines, box shadows, and some instances of padding and margin.

border: 5px solid #50bdb8
creates a 5px width solid border in #50bdb8

outline: 3px solid red
creates a 3px solid red outline

box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.4)
creates a box shadow offset horizontally & vertically by 5px with a 15px blur, no spread, in black at 40% opacity

padding: 5px
adds 5px in padding to all sides

margin-top: 10px
adds 10px margin to the top

This code example will make all tertiary buttons on a Squarespace site 200px in width regardless of the screen size, content, or the fit or fill setting.

.sqs-button-element--tertiary {
width: 200px!important;
max-width: 200px!important;
min-width: 200px!important
}

Relative Values: change based on other settings like screen size

Percentage, View Width and View Height are common relative values.

A percentage value is relative to the object container. For example, a list item image in Squarespace with a width of 50% will take up half of the width of the list item.

VW and VH will adjust to the browser window size. These are ideal for layout changes, like adjusting the background of a page or section.