Custom module Spacing

This tutorial explains how to customize the default 'Spacing' module in Matrix themes and Matrix Page Builder to make it smaller for mobile devices.

• Add a module "Columns" with only one column
• Inside the "Columns" add a module "Spacing" and adjust the height for the desktop devices.
• Below the module "Spacing" add "Widget/HTML" with a tag variables.

Available options:

• m-spacer-0 (0px)
• m-spacer-extra-small (10px)
• m-spacer-small (25px)
• m-space-medium (50px)
• m-spacer-large (100px)
• m-spacer-extra-large (150px)

As seen in the screenshot, the default value of the 'Spacing' module is 100px for desktop devices. By adding the variable tag m-spacer-small, its value will be 25px for mobile devices.