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

# Site width

> Choose how wide your page content gets on big screens. Sections, the header and the footer all line up to it.

Choose how wide your page content can get. On a big screen, a narrower width keeps lines of text short and easy to read; a wider one gives photos and grids more room.

 **Who can do this:** Editors, Admins and Owners.

## Open Site Width

* In the toolbar (the bar across the top of your site once you're signed in; see [The toolbar](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md#the-toolbar)), choose **Site design**, then the **Site Width** tab.
* Or open the command palette (⌘K, or Ctrl+K on Windows), choose **Site design**, then **Site Width**.

The tab holds one setting, **Content width**.

![Site design open on Site Width, with the Content width list open showing Standard (1216px), Wide (1536px) and Extra wide (1760px).](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/site-width/guides-site-design-site-width-screen-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=9d3ef5c42e545d871f2aa8b92b4a5ce3)

The Site Width tab and its three widths.

## Content width

**Content width** is the widest your content gets. The widths are in pixels (px), the tiny dots a screen is made of. You don't need to work anything out: a typical laptop screen is about 1440px wide, and a large desktop screen 1920px. Every section, side-by-side layout, the header and the footer line up to it, so their edges always match.

* **Standard (1216px)**: a narrower page. Good for sites with lots of text.
* **Wide (1536px)**: the built-in width. A balance of text and room for images.
* **Extra wide (1760px)**: the widest page. Good for big photos and galleries on large screens.

The width is a limit, not a fixed size. A screen narrower than your choice uses its full width, minus a small margin at each side. That margin grows from about 20px on a phone to 48px on a large screen.

![The same Parker's page on a wide desktop screen twice, side by side: on the left at Standard (1216px), with wide empty margins either side; on the right at Extra wide (1760px).](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/site-width/guides-site-design-site-width-compare-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=299ca9c0230808893093a1837832a71f)

Standard keeps content narrow on a big screen. Extra wide uses more of it.

## Put the change live

Choose **Update** to save the width and put it live on your site. To save it without putting it live yet, open the arrow next to **Update** (**More save options**) and choose **Save Draft**. Your changes wait there; open the window again and choose **Update** when you're ready to put them live.

## Good to know

* **Check on a big screen.** On a laptop or a phone you may see no change at all, because the screen is narrower than every choice.
* **Backgrounds still reach the edges.** Content width limits the content, not the section's background color or photo.
* **Preview other screen sizes.** Use the device buttons in the edit bar to see your page at phone and tablet sizes. See [Preview on phones and tablets](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md).

## Related

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> columns that line up to the same width.

> [card] [Header](https://docs.fetchski-attract.com/guides/site-design/header.md)
>
> the header bar, which follows this width.

> [card] [Site design](https://docs.fetchski-attract.com/guides/site-design/index.md)
>
> every tab on this screen.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.