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 Blisk.io’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!

-Toby

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 twitter.com/tobycryns and twitter.com/themightymo

Follow Toby's contributions on Github and WP.org.