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.

microservices for wordpress

Serverless Microservices for WordPress

Microservices: Imagine that your application (for example, your WordPress site) is broken into smaller services (i.e. microservice). Each service handles one part of your application’s operation. One service might only handle the authentication of users. Another service might handle the comment system. Yet another service might handle the routing of web pages. All of these…
Read More
child themes versus theme frameworks

WordCamp Las Vegas 2010: Child Themes vs. Theme Frameworks

Brandon speaks at WordCamp Las Vegas 2010 discussing the pros and cons of using child themes versus using theme frameworks.
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.