Adaptive
spacing

With Variables

How it Works

Each of the spacing amounts are created in Webflow variables so that they can be utilized in the styles panel but are controlled in the Global code embed. I created two different methods for the responsive scaling values.

Option 1

In the simple one each value is multiplied by a scale amount so they all are changed by an equal percent on each breakpoint. This allows you to more quickly adjust how much the spacing values decrease on each breakpoint. Individual spacing values can also be overwritten on specific breakpoints if needed to make sure they don't get smaller than a certain amount.
The downside of this approach is often you want the larger values to decrease much more than the smaller ones so this result can mean that smaller values get too small on mobile breakpoints.

Option 2

In this option I spent the time to decrease each of the values by a custom amount on each breakpoint, this makes for a more graduated scale that I think will be more optimized for most projects but won't be quite as fast to customize.

I'd recommend checking out how each option scales and choosing the custom code that works best for your usecase.

Note: Webflow won't display the correct values in the styles panel on tablet and mobile since they are being modified with custom code.

Adaptive Spacing Values

0.25
0.5
0.75
1
1.25
1.5
1.75
2
2.5
3
3.5
4
4.5
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20