Coding Responsively: Length Values
Squarespace is a responsive website builder that changes the layout and size of the content on your site based on the size of the screen you are using. When we use code to change things in Squarespace, we need to be sure that our length values are responsive too! This article talks about the four main length values you’ll want to create with code and how each one of them works.
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.
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.
ARTICLE RECAP
Absolute length values are the same on every screen size.
PX is great for borders and moving margins and paddings around a bit, as long as you are careful of adjusting your code for different screen sizes.
Relative length values change based on screen size.
Percentages, vw, and vh are what I recommend for changing the size and/or layout of content inside Squarespace to keep it responsive.
