Change device breakpoints site-wide

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

  • Medium device breakpoint: 992 px
    Device behavior changes from large to medium at 992 px.
  • Small device breakpoint: 768 px
    Device behavior changes from medium to small at 768 px.

You can modify these breakpoints site-wide in the Beaver Builder global settings in the Tools menu.

Note: If you change these breakpoints globally, be sure to adjust any custom CSS rules you've written accordingly.

To change device breakpoints site-wide:

  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 as you like.
  4. Click Save to save and exit Global Settings.
    You can exit your Beaver Builder edit using any method, because the global settings are already saved..