Change device breakpoints site-wide

By default the Woo360 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 Page Builder global settings.

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 in Page Builder.
  2. In the upper right corner, click the Tools button, 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 Page Builder edit using any method.

Tip: Many of the built-in Page Builder layout rules are written with max-width CSS attributes to work differently on each device size. If you write custom CSS, you should take device size into account. As an example of CSS rules with breakpoints, see the article on  transparent headers.