How I Set my Beaver Builder Responsive Settings

Today I ran into an issue where my Beaver Builder responsive settings were confusing the heck out of me. So I did a deep dive, rethought how I’m going to use those settings moving forward, and created this quick guide for y’all (hopefully it’ll save you some headaches!).

Step 1: Decide which 3 devices you want to support.

In my case, I chose to support the newest iPhone vertical layout, iPad 12 vertical layout, and iPad 10 vertical layout. Beaver Builder’s “Desktop First” approach to responsive design has a default “Extra Large” breakpoint of 1200px, and there’s no changing that.

Your list of supported devices might vary based on your use case – that’s part of the fun of web design! With those devices in mind, I visited’s wonderful Device Width page and found those 3 devices’ respective widths:

As you can see in the photos above:

  • the iPhone 14’s vertical width is 390px.
  • the iPad 12’s vertical width is 1024px.
  • the iPad 10’s vertical width is 810px

Step 2: Update the Global Beaver Builder Responsive Breakpoint settings.

Here are my Beaver Builder responsive breakpoint settings:

beaver builder responsive breakpoints
beaver builder responsive breakpoints

With the above Beaver Builder breakpoints in mind, I’m effectively using the:

  • default 1200px “Extra Large” breakpoint for laptops, desktops, iPad horizontal, etc.
  • “Large Device” 1024px breakpoint for the iPad 12 vertical.
  • “Medium Device” 810px breakpoint for the and iPad 10 vertical.
  • “Small Device” breakpoint for the iPhone vertical

Step 3: Test Using Chrome’s Responsive tools.

I use Chrome, but all the browsers have a similar responsive testing toolset.

That’s all – I hope this has been helpful!


Posted in

Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress consultant, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and then to and

Follow Toby's contributions on Github and