> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/template-parts/settings/container-settings.md).

# Container Settings

Wrapper width, device visibility and classes for a Section, Header or Footer.

**Container Settings** applies to **Sections**, **Headers** and **Footers**. It controls the wrapper Kalium puts around the part, how wide it is, which devices see it, and what HTML element is used.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-19c147714044268f61fbbf1c26af9c3c731b3e5c%2Fcontainer-settings.jpg?alt=media" alt="" width="278"><figcaption></figcaption></figure>

***

### Wrap with Container

This is the setting people come here for. It decides whether your section lines up with the rest of the page, or runs edge to edge.

**On**\
The section sits inside the site's content container, so its left and right edges line up with the header, the content and the footer. This is the default and it is what you want most of the time.

**Off**\
No wrapper is printed at all, so the section stretches the full width of the browser window. This is how you build a full-width colored band, a wide image strip, or a promotional bar that spans the whole screen. The three settings below belong to that wrapper, so they disappear while this is off.

{% hint style="info" %}
**"My section isn't full width."** Turn **Wrap with Container** off. This is the single most common question about sections.

The reverse also happens: a section that looks like it is escaping the page layout usually needs this turned back on.
{% endhint %}

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FhYFu7tRvEPRDdC4QVVNu%2Fcontainer-1.jpg?alt=media&amp;token=ca49b433-6c13-4791-8b3d-e5438811ae4c" alt=""><figcaption></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Ff2WeeVxz5m4Bzuc18v3O%2Fcontainer-2.jpg?alt=media&amp;token=56ab26f6-117f-4c1a-b28e-0d0de4c04f9b" alt=""><figcaption></figcaption></figure></div>

***

### Visibility

Choose which devices show this section:

* **Desktop**
* **Tablet**
* **Mobile**

All three are on by default. Turn one off and the section is hidden on that device.

This is how you show a wide promotional banner on desktop but keep it off phones, where it would take up most of the screen. It is also the first thing to check when a section appears on your computer but not on your phone.

***

### Container Classes

Add your own CSS class names to the section wrapper, separated by spaces.

You only need this if you're writing custom CSS and want a reliable way to target this particular section. Leave it empty otherwise.

***

### Tag Name

The HTML element used for the wrapper. The default works for most sections.

If you know why you'd want a `<section>` or an `<aside>` instead of a `<div>`, this is where you change it. If that sentence didn't mean anything to you, leave it as it is. It makes no visual difference.

***

These settings are shown in context, as part of building a real section, here:

{% content-ref url="/pages/VCftI0anq9G8DY5VVWIj" %}
[Creating a Section](/template-parts/creating-template-parts/creating-a-section.md)
{% endcontent-ref %}
