Responsive editing mode
Responsive Editing Mode allows you to preview and edit your layouts at different screen sizes directly within the Beaver Builder editor.Access responsive editing mode
Choose device size
The editor will switch to medium device view. Click the device icon in the top bar to cycle through Large, Medium, and Small device views.
Device-specific settings
Many settings in Beaver Builder include a responsive toggle that allows you to configure different values for each device size:Available responsive settings
- Margins and padding: Set different spacing for each device
- Font sizes: Adjust typography for optimal readability on each device
- Background images: Use different images for different screen sizes
- Visibility: Show or hide elements on specific devices
- Column widths: Control how columns behave at different breakpoints
- Alignment: Change text and element alignment per device
- Border and shadow: Adjust borders and shadows for each device
Using the responsive toggle
When you see a responsive toggle icon next to a setting:- Click the icon to enable device-specific settings
- Select the device size you want to configure
- Enter the value for that device
- Repeat for other device sizes as needed
Responsive breakpoints
Beaver Builder uses three default breakpoints:- Large: 1200px and above (desktops)
- Medium: 992px to 1199px (tablets in landscape)
- Small: 768px and below (phones and tablets in portrait)
Column stacking
Columns automatically stack vertically on small devices. You can control this behavior:Stacking order
- Default: Columns stack left to right, top to bottom
- Reversed: Use the reverse stacking order option in column settings
- Custom: Set specific column widths for each device to control stacking
Prevent stacking
To prevent columns from stacking on mobile:- Open the column settings
- Go to the Advanced tab
- In the Responsive section, set custom widths for small devices
- Ensure the total width doesn’t exceed 100%
Visibility options
Control which elements appear on different devices:Best practices
Mobile-first approach
Consider designing for mobile first, then enhancing for larger screens:- Start with the mobile layout
- Ensure content is readable and usable on small screens
- Add enhancements for medium and large screens
- Test on real devices when possible
Performance considerations
- Use appropriate image sizes for each device
- Leverage lazy loading for images
- Minimize the use of large background images on mobile
- Consider hiding decorative elements on small devices
Testing
- Always preview layouts in responsive editing mode
- Test on actual devices when possible
- Check all breakpoints, not just the extremes
- Verify that forms and interactive elements work on all devices
- Test with different content lengths to ensure layouts remain flexible
Preview mode
In addition to responsive editing mode, you can use Preview Mode to see your layout without the editing interface:- Open the Tools menu
- Click Preview Layout
- Choose a device size to preview
- Click Continue Editing to return to the editor