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.
- 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:
- Open any of your pages or posts for editing in Beaver Builder.
- 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.
- Change the number of pixels for the Medium device breakpoint or Small device breakpoint.
- Click Save to save and exit Global Settings.