---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
title: 'Run a section edge to edge | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: "Let a section's content run edge to edge, or keep it boxed while the background fills the window"
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Run a section edge to edge'
      description: "Let a section's content run edge to edge, or keep it boxed while the background fills the window"
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
      articleSection: 'Design guides'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
      description: "Let a section's content run edge to edge, or keep it boxed while the background fills the window"
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Run a section edge to edge.

Let a section's content run edge to edge, or keep it boxed while the background fills the window

 Learn DXPR BuilderBuild pagesStyle your elementsDesign guides

   ## In this guide

 Related guides

- [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design)

You can let a section's content run from edge to edge, or keep it boxed in the centre while the background fills the window. One toggle on the section decides: **Full width**. The example builds a grey section with three columns, then switches **Full width** on so the columns stretch. For colour and photo fills, see [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds).

The video builds a grey section with 3 columns, then lets its content run edge to edge.

  ## Build a boxed section

1. Click **Add Elements** in the empty content area and pick **Section** from the **Layout** tab.
2. Hover the section, open **More** and choose **Settings**.
3. Open the **Style** panel and pick a light grey **Background**.
4. Click **Save**. The grey already spans the window.
5. Click **+** on the section and pick **Row**.
6. Click the grid icon on the row, pick the tile with three equal columns and click **Save**.
7. In each column, click **+**, pick **Text** from the **Content** tab, type a **Heading 4** and one line, and click **Save**.

The three columns now sit in a centred box on the grey band.

## Switch on Full width

1. Open **More** on the section and choose **Settings**.
2. In the **General** panel, switch on **Full width**.
3. Click **Save**.
4. Click **Save** on the DXPR Builder toolbar.
5. Open the view menu, the eye icon on the toolbar, and choose **Preview**.

## What you see

The grey band looks the same as before. Only the content box changed: the first column now starts at the left edge of the section and the last one ends at the right edge.

Every section has two parts: an outer element that carries the background, and an inner box that holds the rows. **Full width** only changes the inner box. Off, it is centred with a maximum width; on, it stretches to the section's edges.

## Settings

The section's **General** panel holds three layout toggles, all off by default:

| Setting | What it does |
|---|---|
| **Full width** | Rows fill the section edge to edge instead of a centred box |
| **100% height** | The section is at least as tall as the browser window |
| **Vertical centering** | Rows sit in the vertical middle of the section |

Rows have no width setting of their own; the section decides.

## Two patterns

- **Edge-to-edge background, boxed text**: the common hero. Leave **Full width** off and set the background in the **Style** or **Background effects** panel.
- **Edge-to-edge content**: a strip of cards or pictures. Switch **Full width** on and give the columns some **Padding** if text sits too close to the window edge.

## If you don't see the change

- **Nothing changes when you switch on Full width.** On a narrow screen, such as a phone, the boxed version already fills the width. Widen the browser window and look again.
- **The background stops short of the window edges.** Your theme places the page content in a boxed region, and the section can only fill that region. Choose a full-width page layout or region in your theme.
- **Text touches the window edge.** That is what **Full width** does. Add **Padding** in the **Style** panel of the columns, or leave **Full width** off.

## What's next?

- [Fill a section with colour, a photo or a gradient](/hc/documentation/learn-dxpr-builder/design/backgrounds): style the band behind your content.
- [Make your layout work on phones](/hc/documentation/learn-dxpr-builder/design/responsive-design): control how the columns behave on small screens.