Customize Responsive Settings in Beaver Builder

responsive settings in beaver builder

Responsive design is key to making sure your website looks great regardless of the viewing device size. If you’re using Beaver Builder for your site design, you can easily customize your responsive settings.

Standard Responsive Sizes

Responsive design has been around long enough that some standard breakpoints have developed. However, as devices and user behaviors change so do these standards. Depending on the goals of your site and your specific audience you may want to adjust these breakpoints to match your user behavior.

Typically these breakpoints correspond to tablet and mobile sizes. However depending on your users there might be better breakpoints for you to use. Your Google Analytics give a lot of insight on how your users are viewing the site and what devices they’re using. Variations can include large monitors, two different sized mobile devices, or even television based browsers. Also, keep in mind the pixel dimensions are just one aspect of responsive design.

Recorded with Beaver Builder version 1.8 and WordPress 4.9.6

Customize Responsive Settings

Beaver Builder makes it easy to adjust these settings. You can access the responsive layout settings in Beaver Builder’s Global Settings. To find these settings, make sure you’re on a page that’s in Beaver Builder editing mode and go to the Beaver Builder menu. From there you can access the Global Settings tools. In the tool display, make sure you’re on the General tab. Scrolling down the panel you’ll see the Responsive Layout section.

Under Responsive Layout you can configure a few key items. You can disable the responsive features (which you most likely do NOT want to do). You can also disable auto-spacing (again, probably not something you want). Most importantly, you can customize the breakpoints for medium and small devices. 

Responsive Breakpoints

These breakpoints allow you to fine tune the appearance of your pages for devices with different viewports. The breakpoints are pixel dimensions and when the viewing device falls below or between these numbers the alternate display activates.

Once you have sizes that you’re happy with be sure to save your work and publish your page. Remember that this is a global setting so these new breakpoints affect your whole site. When you go to edit individual pages you’ll be able to see how the new breaks affect your layout.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

jwce website workflow

Redesigning a Website Workflow

We recently collaborated with JWC Environmental on a redesign of their entire website workflow. We’ve had the pleasure of working with JWC on a regular basis. They approached us with a big project – a complete overhaul of their main business site and all of the features that were associated with it. We had found…
Read More
introduction to beaver builder rows

An Introduction to Beaver Builder Rows

It is not atypical for sites that we work on to be utilizing a page builder of some kind. Our favorite page builder tool is Beaver Builder. The most useful structure for Beaver builder elements is the row. You’ll notice that when you start editing with the Beaver Builder page editor that you’re presented with…
Read More

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

Subscribe to learn more about the goings on at Pixel Jar.
  • Note: Your email will be added to our CRM and be used to receive emails from Pixel Jar. You can unsubscribe at any time.

  • This field is for validation purposes and should be left unchanged.