> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Layout

> Control the maximum page width and horizontal margins applied across the storefront.

<Frame caption="Theme Editor > Layout">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-layout.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=382028a8711615cde28c690572b39556" alt="Layout settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-layout.webp" />
</Frame>

The Layout panel controls how wide your storefront content area is and how much horizontal space surrounds it. These settings apply globally.

## Settings

| Setting        | Type   | Default | Range       | Description                                                                                              |
| -------------- | ------ | ------- | ----------- | -------------------------------------------------------------------------------------------------------- |
| Max page width | Slider | 1400 px | 800–1800 px | Maximum width of the main content container. Content never exceeds this width regardless of screen size. |
| Margin         | Slider | 32 px   | 0–64 px     | Horizontal padding between the content area and the viewport edge.                                       |

<Note>
  On viewports narrower than the max page width, content fills the available space minus the margin. The max page width only constrains the layout on wider screens.
</Note>

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-layout-page-width: 1400px;
    --storefront-layout-margin: 32px;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Typography" icon="font" href="/docs/sales-channels/online-store/theme-editor/settings/typography">
    Configure fonts and text sizing.
  </Card>

  <Card title="Listings card" icon="rectangle-vertical-history" href="/docs/sales-channels/online-store/theme-editor/settings/listings-card">
    Configure listing card layout and appearance.
  </Card>
</CardGroup>