Skip to main content

Change global breakpoints

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

  • Medium device breakpoint: 992px.
    At a screen width of 992px, layout behavior changes to that for medium-sized devices.
  • Small device breakpoint: 768px.
    At a screen width of 768px, layout behavior changes to that for small-sized devices.

For more information, see the article about breakpoints.

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

  • 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 the article about the Customizer General tab.
  • 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.