Customize 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.

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.