11: Responsive fields reference
Users can enter different responsive breakpoint values for a single field by clicking on the device toggle icon associated with that field. You can see an example of this in the Beaver Builder editor if you visit the margins setting for rows, columns or modules.
The following field types support responsive breakpoints:
The easiest way to enable this for your fields is to define responsive
as true
in your field config, as shown below.
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
'placeholder' => 24,
'responsive' => true,
),
You can have more granular control by defining responsive
as an array of standard field config keys, with each providing a value for the default
, large
, medium
, and responsive
breakpoints, as follows.
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
'responsive' => array(
'placeholder' => array(
'default' => 36, // Extra Large
'large' => 26, // Large Breakpoint
'medium' => 20, // Medium Breakpoint
'responsive' => 16, // Small Breakpoint
),
),
),