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.

PowerPack Beaver Addons

PowerPack Beaver Addons for Beaver Builder

The PowerPack Beaver Addons for Beaver Builder adds a lot of supplemental features to a Beaver Builder website. We think there are a lot of potentially great features here, but we also know that the amount of functionality in this plugin can be overwhelming. Many of the features of the PowerPack Beaver Addons will be…
Read More
speed up wordpress

Speed Up WordPress by Deactivating Unused Plugins

Here's another easy tip to help speed up the load time of your WordPress website. Deactivate any unused plugins. Simple, right? This may seem like a "no duh!" tip for WordPress users, but we can all be guilty of missing the obvious and/or being lazy. If you are diligent about keeping your plugins tidy, good for you. If not, read on.
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.