Responsive behavior in Beaver Builder
All Beaver Builder layouts are responsive, meaning they automatically adjust for various screen sizes.
- You can make changes for specific device sizes by entering Responsive Editing Mode. See the example in the Related Articles for more information.
- You can set default heading and text sizes for large, medium, and small devices that apply to Beaver Builder plugin and Themer layouts.
By default, layouts are responsive in the following ways:
- Beaver Builder has three device sizes built in: large (typically desktop and laptop displays), medium (tablets) and small (smartphones). Device sizes are determined by breakpoints set on browser width. For details, see this article about breakpoints.
Stacking determines how 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.
Margins and padding for rows, columns, and modules are automatically adjusted on small devices with the Beaver 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.
By default, all modules are visible at every device size, but you can hide any row, colulmn, or module on particular device sizes.
Finally, although we don't recommend it, you can disable responsive behavior site-wide.