Full Width and Fixed Width

When creating a row in Beaver Builder, you can control how wide the row and its content appear on the page. Understanding the difference between full width and fixed width helps you build consistent and responsive layouts.

Overview

Each row has two width settings:

• Row Width
• Content Width

If the row is set to Full Width, you can choose whether the content inside it is Full Width or Fixed Width.

Row 1: Full Width Row, Full Width Content

In this layout:

• The row background stretches across the full browser width or theme container.
• The content inside the row also stretches across the full width.

This layout is commonly used for banners, hero sections, or full-width design elements.

Note: Use padding instead of margins if you want spacing inside the row without pulling the background away from the page edges.

Row 2: Full Width Row, Fixed Width Content

In this layout:

• The row background stretches across the full width.
• The content inside is centered and limited to a maximum width.

The default fixed width is typically 1100px, but this can be adjusted in Global Settings or within the individual row settings.

Important: Fixed width means maximum width. The content will shrink on smaller screens but will not expand beyond the defined value.

This is the most commonly used layout structure for modern websites.

Row 3: Fixed Width Row

In this layout:

• The entire row, including its background, is limited to a maximum width.
• The row remains centered on the page.

When the row width is set to Fixed, the content automatically follows the same width unless modified by spacing settings.

This layout is often used for boxed designs.

Setting Width in Row Settings

To adjust row and content width:

1. Hover over the row.
2. Click the Row Settings icon.
3. Open the Style tab.
4. Choose:
   • Row Width: Full or Fixed
   • Content Width: Full or Fixed (if row is Full Width)
   • Maximum Width value