Skip to main content
Responsive settings in Beaver Builder allow you to configure how your layouts adapt to different screen sizes. These settings control breakpoints, auto-spacing, and other responsive behaviors.

​
Responsive breakpoints

Beaver Builder uses three default breakpoints to ensure your layouts look great on all devices:
  • Large Device Breakpoint: 1200px (desktops and large tablets in landscape)
  • Medium Device Breakpoint: 992px (tablets in portrait and small laptops)
  • Small Device Breakpoint: 768px (mobile phones and small tablets)
You can customize these breakpoints in the Global Settings to match your design requirements.

​
Auto spacing

Auto spacing automatically adjusts margins and padding for rows and columns on small devices, ensuring consistent spacing without manual configuration. When enabled (default):
  • Row and column margins are set to 0px on small devices
  • Left and right padding is set to 0px on small devices
  • Top and bottom padding inherits values from Global Settings or per-device settings
This feature simplifies responsive design and saves significant time when building mobile-friendly layouts.

​
Responsive editing mode

Beaver Builder’s Responsive Editing Mode allows you to preview and edit your layouts at different screen sizes:
  1. Click the Tools menu in the top bar
  2. Select Responsive Editing
  3. Choose between Large, Medium, or Small device views
  4. Edit your layout with device-specific settings
  5. Click Exit to return to normal editing mode
Use the keyboard shortcut R to quickly toggle responsive editing mode and cycle through breakpoints.

​
Device-specific settings

Many settings in Beaver Builder include a responsive toggle that allows you to configure different values for each device size:
  • Margins and padding
  • Font sizes
  • Background images
  • Visibility
  • Column widths
  • And more
Look for the responsive toggle icon next to settings fields to enable device-specific customization.

​
Column stacking

Columns automatically stack vertically on small devices due to limited screen width. You can control column stacking behavior:
  • Default: Columns stack in their natural order (left to right becomes top to bottom)
  • Reversed: Columns stack in reverse order
  • Custom widths: Set specific column widths for each device size to control when and how columns stack

​
Best practices

Design mobile-first: Start with mobile layout and enhance for larger screens, or at minimum, always check mobile view before publishing.Test on real devices: Preview your layouts on actual devices when possible, not just in responsive mode.Use auto spacing: Enable auto spacing to maintain consistent mobile layouts without extra effort.Optimize images: Use responsive images and appropriate sizes for different devices to improve loading times.Check column stacking: Verify that columns stack in a logical order on mobile devices.

Build docs developers (and LLMs) love

Get started for freeTalk to us