How to Edit for Mobile Responsiveness in BeaverBuilder

Your website is built to be responsive, meaning it automatically adapts to desktop, tablet, and mobile devices. However, sometimes you’ll need to adjust content in BeaverBuilder so it looks clean across all screens.

Step 1: Open Responsive Editing Mode

1. Log in to your WordPress dashboard.

2. Open the page you want to edit with Beaver Builder.

3. To switch between device previews, you have two options:

   • Click the desktop icon in the top toolbar and choose Desktop, Tablet, or Mobile.

   • Or simply press the R key on your keyboard to quickly open the breakpoint preview.

Step 2: Adjust Rows and Columns

• Stacking Order: By default, columns stack vertically on mobile.

• If the order doesn’t look right:

  1. Hover over the row and click the wrench icon.

  2. Go to Responsive Settings.

  3. Adjust the column stacking order if needed.

Step 3: Adjust Text and Headings

• Select the Text or Heading module.

• In the settings panel, go to the Style tab.

• Use the Responsive controls (desktop, tablet, mobile icons) next to font size, line height, and alignment.

• Example: A heading might be 48px on desktop, but 28px on mobile.

Step 4: Adjust Image Sizes

• Click the Image module.

• Go to the Style tab.

• Set the maximum width differently for desktop, tablet, and mobile.

• Example: Full width on mobile, but only 50% width on desktop.

Step 5: Show or Hide Content on Devices

• Any row, column, or module can be set to display only on certain devices.

1. Open the Advanced tab of the settings.

2. Scroll to Visibility.

3. Choose whether to show/hide on Desktop, Tablet, or Mobile.

• Example: A wide banner image might be hidden on mobile and replaced with a simplified version.

Step 6: Test Your Changes

• After making edits, preview on all device views using the toolbar or the R key shortcut.

• Always test on a real phone or tablet to confirm the layout is clean and easy to navigate.

Best Practices for Mobile Editing

• Keep font sizes readable (minimum 16px for body text).

• Stack content vertically for easy scrolling.

• Use buttons instead of small text links for tap targets.

• Ensure images scale correctly and don’t crop important details.