Skip to content

Staying Responsive

Best Practices for styling design components on ipad and mobile screens.

Responsive Behavior

Responsiveness in Beaver Builder

Since its is the only platform we build in that has adjustable responsive properties directly controlled by the designer, we will be discussing a site's responsive behaviors keeping Beaver Builder as the focal point. All Beaver Builder layouts are responsive, meaning they automatically adjust for various screen sizes. By default, layouts are responsive in the following ways:

  • 1

    Device size

    Beaver Builder has four device sizes built in: extra-large (large desktop, ultrawide displays, laptop displays), large (small laptop screens, large tablets), medium (tablets) and small (smartphones).

  • 2

    Breakpoints

    Breakpoints define the browser width at which the settings for each device size apply. The default values for these breakpoints are: 1500px for extra-large, 1200px for large, 992px for medium devices and 768px for small ones. These values can be customized - See Global Settings in Beaver Builder Best Practices.

  • 3

    Stacking

    Stacking determines how rows, columns, and modules are ordered as the width of the display decreases. You can control column stacking by setting custom column widths for each device size, or you can disable column stacking.

  • 4

    Spacing

    Margins and padding for rows, columns, and modules are automatically adjusted with the Beaver Builder autospacing feature. For fine-tuning, you can adjust margins and padding for each device size to override autospacing, or you can disable autospacing entirely.

  • 5

    Visibility

    By default, all modules are visible at every device size, but you can hide modules on particular device sizes.

Responsive Editing Mode

The Beaver Builder editor's default layout is for large screens, and Responsive Editing Mode makes it much easier to adjust the settings for medium and small devices. If you prefer, you can enter Responsive Editing Mode immediately and build a mobile layout, then adjust for larger screens. Either way, chances are that as you work you will want to tweak your original design to optimize it for every device size.

Enter Responsive Editing Mode in any of the following ways:

  • 1

    Click a responsive icon

    Click one of the small responsive icons next to specific settings for a row, column, or module. Your page view will stay in responsive editing mode even if you close the Settings window. Use the Exit button to close responsive editing.

  • 2

    Tools Menu

    On the Tools menu, click Responsive editing.

  • 3

    Use the keyboard shortcut "R"

    Type the keyboard shortcut R. This keyboard shortcut toggles responsive editing mode to open in medium device view, change from medium to small device view, and close the responsive editing window. Note that keyboard shortcuts are always lowercase letters.

Source: Beaver Builder Knowledgebase - Responsive behavior | Responsive Editing

Column Layouts Overview

In Beaver Builder you can construct complex layouts with column layers and child columns, but the 2.8 version comes with a new feature – Box Module which combines both flexbox and CSS grid to help you create intricate, fluid and flexible layouts.

Box Module

The Box module operates similarly to a row or column, acting as a versatile container. You can nest, stack and organize multiple Boxes in both horizontal and vertical orientations, as well as within a grid system.

Here are some various layout examples created with Box Module:

  • Usage

    The Box module should be placed inside a row. If you try to drag the Box module onto the page than a row will be automatically created for you. To nest boxes within boxes, simply drag a Box module into another Box module. This makes it easy to create intricate layouts.

    Follow this article to understand the Box Module Basics and take some time to watch these new tutorials. Even if Box module is user-friendly it is recommended that you have some grasp of Flexbox and CSS Grid.

Play Video
Header Design
Play Video
Bento Grid

  • Module Aliases

    In the editor’s library panel you can find along with Box Module several Module Aliases which helps you easily create common layouts : Flex Columns, 3x2 Grid, 4x2 Grid, Split Header and Photo Grid.

  • Display Options

    In the Box Module settings you will find three different display types: Flex, Grid and Layers. Certain options, such as Direction and Wrapping, vary depending on the display type you have chosen, but settings like Spacing, Sizing & Placement, Appearance and Linking remain consistent across all display selections.

  • Responsive Design

    Based on flexbox and CSS grid, the Box Module it’s an ease for the responsive part of your website. You can easily make changes on direction, alignment, size, grid area etc. for small screens. For example on mobile view you can stack columns fast by setting the grid template to one column and multiple rows. A great thing is that you can change from CSS grid to flexbox on other devices, you can customize both container and children or use the span property to rearrange boxes without worrying about setting individual column widths on each device. These new features helps you create fluid and flexible layouts.

Note! A better way to take control of Box Modules is to access the outline panel because you can find nested items easier and understand the DOM tree.

Column layers, module layers, and child columns

In any row, you can have multiple vertical layers of parent columns, child columns, and modules.
Here are some diagram examples of a single row with various configurations of layers and columns. 

  • If you want to more than one module in a layer, add a new column for each module. Note: You can have a maximum of 12 columns in a layer. You can have as many module and column layers in a row as you like.
  • A column within another column is considered a child column. Note: You can have a maximum of four child columns in a layer. You can have as many layers of child columns as you like.
  • You can also have a single child column in a row with module layers. Why would you want to do this? Usually, it's because you want to add a background color or image to the child column but you still want the modules and the child column in a single parent column (perhaps to add another background color or to line up content in another column to the left or right).
Figure 1: One column with three module layers
Figure 2: Two column layers with one column in the first layer and two columns in the second layer
Figure 3: Two module layers and a third layer with two child columns
Figure 4: Two module layers and a third layer with one child column

Note: By default, when you drag a module into a column, you create a module layer. If you want to create a child column, you usually need to add one or more empty columns inside the main column before you add modules.

Responsive behavior: column stacking

As screen size decreases, column and module stacking occurs left to right, top to bottom first within each column then across columns. 

Tip: Beaver Builder has a setting to reverse the stacking order, but you can't choose an arbitrary stacking order. Knowing how columns will stack is an important factor in how you construct your page. As an alternative, you can prevent column stacking by setting column widths for medium and small devices. 

Source: Beaver Builder Knowledgebase - Column layouts

Styling for Mobile

Prevent Column Stacking With Custom Widths

You can prevent column stacking as screen width decreases by setting column widths differently for each device size.

For example, here's a two-column layer in which the columns have equal widths of 50% on large devices, as shown in the top screenshot. For medium devices (tablets), shown in the middle screenshot, the width of the left column was set to 20% and the right column to 80%. For small (mobile) devices, shown bottom screenshot, the width of the left column was set to 35% and the right column to 50%. You can see that the narrower columns are left-aligned in their space.

Column widths set for medium and small devices can be set to total less than 100% for the columns in a layer, as shown in the in the last screenshot above, in which the left column is 35% and the right column is 50%.

Tip: If you set a large-device value for one column, the values in the other columns in the layer will be adjusted automatically to total 100%. This isn't true when you set column width values for medium and small devices. If you set a width value for a medium or small device, it's a best practice to set an explicit value for all the other columns in the same layer.

To change the width of columns by device size as of Beaver Builder 2.8:

Tip: In order to have a number of columns sit inline with each other, completely filling a row in width on any device, their percentage widths should always add up to 100%.

  • 1

    Column settings

    Open Column settings for one of the columns.

  • 2

    Style tab

    On the Style tab in the Width field, set the percentage for large devices in the normal fashion.

  • 3

    Responsive toggle

    Click the responsive toggle to enter Responsive Editing Mode. The view when you enter Responsive Editing Mode is for medium devices, and the values are empty because they are inheriting the setting from the large screen.

  • 4

    Enter custom width for medium devices

    If you want to block column stacking for medium devices, enter the % width that you want for that column.

  • 5

    Enter custom width for small devices

    If you want to block column stacking for small devices, click the responsive toggle again and enter the % width that you want for small devices for that column. If you leave the Width value blank, it will inherit the value from the medium device setting.

  • 6

    Repeat

    Repeat these steps for each column in the layer that you want to modify.

Source: Beaver Builder Knowledgebase - Custom Widths & Stacking

Mobile Alignment

Basic Rules for Alignment

The basic rules for alignment regardless of screen size are discussed on the "Design Practices" page in the "Layout Consistency" section under the heading "Alignment & Balance." It’s a good practice to maintain consistency in how headings or text content on a page in similar rows are aligned.

For example:

  • If the headings in a hero row are left aligned, make the rest of the content on the page left aligned.
  • If a site has mainly left aligned text, and there is text that seems like it should be bold and centered in a "call-to-action" manner, make sure this text is depicted as separate from the rest of the body content using a separator line or by placing the text in its own row.
  • Its okay to alternate alignment of text/list icons/images as long as a balanced layout is achieved.
In the same way, for mobile layouts, as long as the content appears balanced, any alignment is okay.

Footer Alignment

  • Is there a right or wrong way to align content in the footer area in mobile view?

    There isn't a right or wrong way to align content in the footer. The key is to maintain visual balance. 

  • Should the footer content's alignment be consistent with the rest of the site?

    Deciding which direction to align the footer on mobile is different per scenario.
    The decision ultimately depends on the content in the footer and the limitations of the modules this content is placed in. 

  • Is there a standard alignment tactic for all footers on mobile across the board?

    Footer alignment should vary on every site depending on the content in it, so there's no standard that should apply to every footer across the board. A few examples of the proper ways to align footer content on mobile screens are discussed in detail below. The examples should provide a better insight on which footer features should contribute to the alignment decision in different scenarios.

Simple Footer Layouts Like Footer 1

In a footer with a simple layout like footer 1, with icons and maybe a menu, centering the content is a pretty standard practice. The default layout may stack the menu items and not center them but the module's responsive settings or even a simple line of CSS can help center them.

What to look out for when properly aligning content on mobile view in a simple footer: 

  • 1 All the footer items are uniformly aligned - either to the left, centered, or to the right, but are consistent
  • 2 The colors match the theme and the sizing of text/icons/headings adjust for the screen size
  • 3 The widths of columns in the footer are uniform or at least balanced-looking - sometimes when stacking on mobile, the menu module will not take up 100% of the column space, this can also be fixed with a simple line of CSS (make sure to place this in the media query for small screens)
Default layout on mobile
Mobile view after styling
/*CSS snip to make the menu items full width and center them*/ footer .fl-menu ul.menu { text-align: center; width: 100%; }
Content-Heavy Footer Layouts Like 2-5

In a layout like footer 2 - footer 5, where there is a lot of content, icons, posts, categories etc - keeping the contents left aligned is standard. Also, in footers like 2 - 5, due to the amount of content in them and the fact that on mobile screens each of the columns stack into their own sections, it would be acceptable to have one section (e.g. the social icons and menu) be centered, and for another section (e.g. the contact info and CTA text) to be left aligned.

Its important to note that: Some modules e.g. contact list, recent posts, post/product categories, etc., do not give you the option to align them differently than their default "left." In order to force them be centered, a builder would have to assign them a class, use CSS to align them on mobile only and hope that it works on all browsers. The contact icons, which are basically a stylized bullet list, would have to be replaced entirely with another module to get them to center on mobile at all.
Bullet lists should never be centered.

Rules to follow when styling a content-heavy footer for mobile screens: 

  • 1 If all items on a page are aligned to the left on mobile, and one section in the footer is center aligned, then that section can be fixed to align to the left for consistency
  • 2 Similarly, if all items are centered on mobile, and if the contact icons section is the only left aligned item on the page, then it would be a good idea to maybe change the contact icons module for one that allows centering on mobile
  • 3 As stated above, there's no correct answer - alignment really doesn't matter as long as the content in each section appears balanced and professional
Footer 2 - keeping all items left aligned
Footer 4 (1) - keeping all items left aligned
Footer 4 (2) - allowing social icons to remain centered

In Conclusion...

  • The time needed to make simple shifts in alignment (or replacing entire sections just to align something in the footer) could be reallocated to improving colors, typography, header design, hero layout and body of the site.
  • The customer's first impression is at the top of the site and the footer alignment can be handled if its determined that they have a particular way they'd want us to set it.
  • If a customer feels strongly about how things are aligned then that can be adjusted when we have their input on it.
  • Don't worry about how items in the footer are aligned as long as it looks balanced and professional, its not something that has a right or a wrong approach.
Table of Contents
    Next Steps

    After installation and customizer setup, its time to create the themer layouts.

    Page Setup
    Scroll To Top