Responsive Design - Beaver Builder

Beaver Builder includes a comprehensive responsive design system that allows you to create layouts that look great on desktops, tablets, and mobile devices. The system provides granular control over how elements appear at different breakpoints.

Responsive Breakpoints

Beaver Builder uses four responsive breakpoints to control layout behavior:

Desktop (Default)
Large
Medium
Mobile (Responsive)

> 992px

Primary design view
Full desktop layouts
Default settings apply
All features available

These breakpoints match the most common device sizes and ensure your layouts work across the vast majority of screens.

Responsive Settings

Most layout settings in Beaver Builder support responsive values:

Spacing Controls

Margins and padding can be set independently for each breakpoint:

array(
    'padding' => array(
        'type'       => 'dimension',
        'label'      => __('Padding', 'fl-builder'),
        'responsive' => array(
            'default' => array(
                'default'    => array('top' => '20', 'right' => '20', 'bottom' => '20', 'left' => '20'),
                'large'      => array('top' => '15', 'right' => '15', 'bottom' => '15', 'left' => '15'),
                'medium'     => array('top' => '10', 'right' => '10', 'bottom' => '10', 'left' => '10'),
                'responsive' => array('top' => '5', 'right' => '5', 'bottom' => '5', 'left' => '5'),
            ),
            'default_unit' => array(
                'default'    => 'px',
                'large'      => 'px',
                'medium'     => 'px',
                'responsive' => 'px',
            ),
        ),
    ),
)

Responsive Typography

Font sizes, line heights, and other text properties:

Responsive Typography

array(
    'typography' => array(
        'type'       => 'typography',
        'label'      => __('Typography', 'fl-builder'),
        'responsive' => array(
            'default' => array(
                'default'    => array('font_size' => array('length' => 24, 'unit' => 'px')),
                'large'      => array('font_size' => array('length' => 20, 'unit' => 'px')),
                'medium'     => array('font_size' => array('length' => 18, 'unit' => 'px')),
                'responsive' => array('font_size' => array('length' => 16, 'unit' => 'px')),
            ),
        ),
    ),
)

Column Widths

Column widths automatically adapt but can be customized:

column-settings.php:12

array(
    'size' => array(
        'type'       => 'unit',
        'label'      => __('Width', 'fl-builder'),
        'responsive' => true,
        'units'      => array('%'),
        'responsive' => array(
            'default' => array(
                'default'    => '50',  // 50% on desktop
                'large'      => '50',  // 50% on large
                'medium'     => '100', // 100% on medium
                'responsive' => '100', // 100% on mobile
            ),
        ),
    ),
)

Row Heights

Minimum heights adjust for different screens:

row-settings.php:121

array(
    'min_height' => array(
        'type'       => 'unit',
        'label'      => __('Minimum Height', 'fl-builder'),
        'responsive' => true,
        'units'      => array('px', 'vh'),
        'slider'     => array(
            'px' => array('min' => 0, 'max' => 1000, 'step' => 10),
        ),
    ),
)

Visibility Controls

Control which elements appear on different devices:

Breakpoint Visibility

array(
    'responsive_display' => array(
        'type'         => 'button-group',
        'label'        => __('Breakpoint', 'fl-builder'),
        'default'      => 'desktop,large,medium,mobile',
        'options'      => array(
            'desktop' => __('Desktop', 'fl-builder'),
            'large'   => __('Large', 'fl-builder'),
            'medium'  => __('Medium', 'fl-builder'),
            'mobile'  => __('Mobile', 'fl-builder'),
        ),
        'multi-select' => array('min' => 1),
    ),
)

Visibility settings allow you to show/hide entire rows, columns, or modules based on screen size. This is useful for creating mobile-specific content or hiding complex elements on small screens.

Common Visibility Patterns

Desktop Only
Mobile Only
Tablet & Up
Mobile & Tablet

Show on: Desktop, Large
Hide on: Medium, Mobile

Use for:

Large hero images
Complex navigation
Multi-column layouts
Desktop-specific features

Show on: Mobile
Hide on: Desktop, Large, Medium

Use for:

Simplified mobile menus
Touch-optimized buttons
Mobile-specific CTAs
Stacked content

Show on: Desktop, Large, Medium
Hide on: Mobile

Use for:

Two-column layouts
Medium-complexity elements
Tablet-optimized content

Show on: Medium, Mobile
Hide on: Desktop, Large

Use for:

Simplified navigation
Single-column content
Touch-friendly interfaces

Responsive Editing Mode

Beaver Builder includes a responsive editing mode for previewing designs:

Accessing Responsive Mode

Open Builder

Launch the Beaver Builder editor

Toggle Responsive

Click the Responsive Editing button in the toolbarOr use keyboard shortcut: Ctrl+Shift+R (Windows) / Cmd+Shift+R (Mac)

Select Breakpoint

Choose which breakpoint to preview:

Desktop (default)
Large
Medium
Mobile

Edit Settings

Modify responsive-specific settings while previewing

Responsive Preview Features

Live Preview

See exactly how your design looks at each breakpoint

Device Frames

Optional device frame overlays for realistic preview

Orientation

Toggle between portrait and landscape

Quick Toggle

Rapidly switch between breakpoints

Responsive Behaviors

Column Stacking

Columns automatically stack on smaller screens:

Desktop (3 Columns)
Medium (2 Columns)
Mobile (Stacked)

┌─────┬─────┬─────┐
│  A  │  B  │  C  │
│     │     │     │
└─────┴─────┴─────┘

┌─────┬─────┐
│  A  │  B  │
│     │     │
├─────┴─────┤
│     C     │
│           │
└───────────┘

┌───────────┐
│     A     │
│           │
├───────────┤
│     B     │
│           │
├───────────┤
│     C     │
│           │
└───────────┘

Reverse Column Order

Change the stacking order on mobile:

array(
    'responsive_order' => array(
        'type'    => 'select',
        'label'   => __('Reverse Column Order', 'fl-builder'),
        'default' => '',
        'options' => array(
            ''              => __('Disabled', 'fl-builder'),
            'mobile'        => __('Small', 'fl-builder'),
            'medium'        => __('Medium', 'fl-builder'),
            'mobile,medium' => __('Small and Medium', 'fl-builder'),
        ),
    ),
)

Normal Order:

[ Image ][ Text ]

Mobile:
[ Image ]
[ Text  ]

Reversed Order:

[ Image ][ Text ]

Mobile:
[ Text  ]
[ Image ]

Background Images

Responsive background images for different screens:

Responsive Background

array(
    'bg_image' => array(
        'type'       => 'photo',
        'label'      => __('Photo', 'fl-builder'),
        'responsive' => array(
            'default' => array(
                'default'    => '123', // Full-size image ID
                'large'      => '124', // Large tablet image
                'medium'     => '125', // Medium image
                'responsive' => '126', // Mobile-optimized image
            ),
        ),
    ),
)

CSS Media Queries

Beaver Builder generates responsive CSS automatically:

/* Desktop (default) */
.fl-node-abc123 {
    padding: 20px;
}

/* Large devices */
@media (max-width: 992px) {
    .fl-node-abc123 {
        padding: 15px;
    }
}

/* Medium devices */
@media (max-width: 768px) {
    .fl-node-abc123 {
        padding: 10px;
    }
}

/* Mobile devices */
@media (max-width: 601px) {
    .fl-node-abc123 {
        padding: 5px;
    }
}

Custom Media Queries

You can add custom responsive CSS:

/* In Global Settings > CSS */

/* Custom breakpoint */
@media (max-width: 480px) {
    .fl-node-abc123 {
        font-size: 14px;
    }
}

/* Landscape tablets */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .fl-row-content-wrap {
        padding: 10px;
    }
}

Global Responsive Settings

Set default responsive behaviors globally:

Default Breakpoint Values

Global Settings

$global_settings = FLBuilderModel::get_global_settings();

// Row widths
$row_width = $global_settings->row_width; // Desktop
$row_width_medium = $global_settings->row_width_medium; // Medium
$row_width_responsive = $global_settings->row_width_responsive; // Mobile

// Row padding
$row_padding = $global_settings->row_padding_top; // Desktop
$row_padding_medium = $global_settings->row_padding_top_medium; // Medium
$row_padding_responsive = $global_settings->row_padding_top_responsive; // Mobile

Default Spacing Units

Responsive Units

// Margin units
$margin_unit = $global_settings->row_margins_unit; // Desktop: px
$margin_unit_medium = $global_settings->row_margins_medium_unit; // Medium
$margin_unit_responsive = $global_settings->row_margins_responsive_unit; // Mobile

Best Practices

Mobile-First Approach

Start with mobile design and add complexity for larger screens:

Design for smallest screen first
Add responsive overrides for tablets
Enhance for desktop last
Test all breakpoints thoroughly

Optimize Images

Use different image sizes for different breakpoints:

Desktop: Full resolution
Large: 80% size
Medium: 60% size
Mobile: 40% size or cropped

Touch-Friendly Targets

Ensure interactive elements are appropriately sized:

Buttons: Minimum 44px × 44px on mobile
Links: Adequate spacing between
Forms: Large input fields
Menus: Touch-optimized navigation

Content Priority

Hide non-essential content on mobile:

Remove decorative elements
Simplify complex features
Focus on primary content
Use progressive disclosure

Performance

Optimize for mobile performance:

Lazy load images
Minimize animations
Reduce HTTP requests
Test on real devices

Testing Responsive Designs

In-Builder Testing

Responsive Mode

Use Beaver Builder’s responsive editing mode

Multiple Breakpoints

Check all four breakpoints systematically

Orientation Testing

Test both portrait and landscape orientations

Browser Testing

Chrome DevTools
Firefox DevTools
Safari DevTools

Open DevTools (F12)
Click device toolbar icon
Select device presets
Test various screen sizes

Real Device Testing

Always test on real devices when possible. Emulators don’t perfectly replicate:

Touch interactions
Performance characteristics
Font rendering
Network conditions

Common Responsive Patterns

Desktop: [ Logo ]  [ Nav Links ]  [ Button ]
Mobile:  [ Logo ]  [ Menu Icon ]
         [ Drawer Menu ]

Responsive Hero Section

Desktop: [ Large Image ][ Text Content ]
Mobile:  [  Small Image  ]
         [ Text Content  ]

Responsive Grid

Desktop: [ Item ][ Item ][ Item ][ Item ]
Tablet:  [ Item ][ Item ]
         [ Item ][ Item ]
Mobile:  [ Item ]
         [ Item ]
         [ Item ]
         [ Item ]

Next Steps

Global Settings

Configure default responsive settings

CSS & Styling

Add custom responsive styles

Frontend Editor

Preview and test responsive layouts

Module Guide

Work with responsive modules

Getting Started

Core Concepts

Building Pages

Extensions

Integrations

​Responsive Breakpoints

​Responsive Settings

​Spacing Controls

​Responsive Typography

​Column Widths

​Row Heights

​Visibility Controls

​Breakpoint Visibility

​Common Visibility Patterns

​Responsive Editing Mode

​Accessing Responsive Mode

​Responsive Preview Features

Live Preview

Device Frames

Orientation

Quick Toggle

​Responsive Behaviors

​Column Stacking

​Reverse Column Order

​Background Images

​CSS Media Queries

​Custom Media Queries

​Global Responsive Settings

​Default Breakpoint Values

​Default Spacing Units

​Best Practices

​Testing Responsive Designs

​In-Builder Testing

​Browser Testing

​Real Device Testing

​Common Responsive Patterns

​Responsive Navigation

​Responsive Hero Section

​Responsive Grid

​Next Steps

Global Settings

CSS & Styling

Frontend Editor

Module Guide

Build docs developers (and LLMs) love

Responsive Breakpoints

Responsive Settings

Spacing Controls

Responsive Typography

Column Widths

Row Heights

Visibility Controls

Breakpoint Visibility

Common Visibility Patterns

Responsive Editing Mode

Accessing Responsive Mode

Responsive Preview Features

Responsive Behaviors

Column Stacking

Reverse Column Order

Background Images

CSS Media Queries

Custom Media Queries

Global Responsive Settings

Default Breakpoint Values

Default Spacing Units

Best Practices

Testing Responsive Designs

In-Builder Testing

Browser Testing

Real Device Testing

Common Responsive Patterns

Responsive Navigation

Responsive Hero Section

Responsive Grid

Next Steps