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.

Weighing in on Gutenberg

Weighing in on Gutenberg

Gutenberg is coming to WordPress. If you haven’t heard about it yet, you’re not reading enough WordPress news. 😉 However, for the sake of completeness, it overhauls the default content editing for WordPress. The new content editor is akin to stacking Legos simulating more of a page building experience. How it Works The Gutenberg experience…
Read More
wordpress vs. squarespace

WordPress vs. Squarespace

There a lot of ways that you can bring your website to the world. In this post we’re going to be highlighting two of the many tools that can be used to manage your content. WordPress which is a full-featured content management system (CMS) that comes in both hosted (via WordPress.com) and self-hosted (via WordPress.org)…
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.