Add Vertical Space For Large Screens

A common pattern is to want to have a certain amount of space between sections of a page when the screen is large, but reduce or remove that space once the screen gets smaller. To solve this, you can combine empty layout and their adaptive mode to create adaptive spacing.

Creating Adaptive Spacing

1. Add a row to the position where you wish to increase spacing from a certain screen size onwards
2. Set the minimum height of that row’s column to whichever amount of space you wish to create
3. Set the adaptive mode of the row to only show when the screen is bigger than the amount you wish
4. With layout mode off, go across screen sizes to verify the effect

Stepped Adaptive Spacing

To add more precise stepping simply create multiple adaptive spacing rows that only show at different screen sizes, so that for example for large desktop screens, there is the largest space, a medium spacing then for laptops and tablets, and then the smallest space for mobile phones.

Tip: when you create multiple adaptive spacing rows – that are one after the other – it helps to rename each of them to signal at which point do they break (e.g. spacingRow960)