Responsive behavior in the Beaver Builder plugin

All Beaver Builder layouts are responsive, meaning they automatically adjust for various screen sizes. By default, layouts are responsive in the following ways:

  • Device size
    Beaver Builder has three device sizes built in: large (typically desktop and laptop displays), medium (tablets) and small (smartphones).
  • Breakpoints
    Breakpoints define the browser width at which the settings for each device size apply. By default the medium device breakpoint is 992px and the small device breakpoint is 768px. These values can be customized.
  • Stacking
    Stacking determines how rows, columns, and modules are ordered as the width of the display decreases. You can control column stacking by setting custom column widths for each device size, or you can disable column stacking.
  • Spacing
    Margins and padding for rows, columns, and modules are automatically adjusted with the Page Builder autospacing feature. For fine tuning, you can adjust margins and padding for each device size to override autospacing, or you can disable autospacing entirely.
  • Visibility 
    By default, all modules are visible at every device size, but you can hide modules on particular device sizes.

Finally, although we don't recommend it, you can disable responsive behavior site-wide.

See the Related Articles for more details about each of these ways to control responsive behavior.