Change device breakpoints site-wide

By default the browser-width breakpoints for the Beaver Builder plugin are as follows:

  • Medium device breakpoint: 992 px and below
    At 992 px, layout behavior changes to that for medium-sized devices.
  • Small device breakpoint: 768 px and below
    At 768px, layout behavior changes to that for small-sized devices.

The change to medium or small device behavior affects two areas:

  • Any restrictions you put on visibility in the Breakpoint field of the Advanced tab
  • Column stacking.

For details, see the article about breakpoints.

You can customize these default breakpoints by changing the Beaver Builder global settings.

Notes:

  • These global settings affect only breakpoint behavior in the Beaver Builder plugin, including Beaver Themer layouts. To change breakpoint settings that affect the Beaver Builder Theme, see this article.
  • If you change these breakpoints globally, don't forget to check if the change affects any of your custom CSS rules.

To change device breakpoints globally for the Beaver Builder plugin:

  1. Open any of your pages or posts for editing in Beaver Builder.
  2. In the title area in the upper left corner, click the down arrow to expose the Tools menu, choose Global settings, and go to the Responsive layouts section.
  3. Change the number of pixels for the Medium device breakpoint or Small device breakpoint.
  4. Click Save to save and exit Global Settings.