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:

• align
• border
• button-group
• dimension
• photo
• select
• typography
• unit

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
    ),
  ),
),