> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-classes-for-full-width-sections.md).

# CSS classes for full-width sections

As the CSS class `container` is not the perfect solution in every scenario, ThemeWare® 1.1.3 includes new CSS classes for "boxed" CMS blocks and CMS sections in Shopping Experiences.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FdBnVFOFm9gjmIIpqwB7t%2Fimage.png?alt=media&amp;token=d30ee098-9366-49b0-ae63-f82e60f6a00b" alt=""><figcaption><p>Left: "Full width" section | Right: "Full width" section with a boxed CMS block</p></figcaption></figure>

**CSS classes**

| Class                     | Block/Section | Description                                                               |
| ------------------------- | ------------- | ------------------------------------------------------------------------- |
| **twt-cms-boxed-content** | Section       | Sets a section to the maximum container width of the theme configuration. |
| **twt-cms-block-boxed**   | Block         | will follow soon...                                                       |

**Examples**

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FzXaZzI7T7es4ZCQviu42%2F2022-09-08_18h16_31.png?alt=media&amp;token=5f7fb5ff-d209-4e72-bec7-fb4707746384" alt=""><figcaption><p>"Full with" section with centred CMS blocks</p></figcaption></figure>

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fh4BeE7Ugqwx6QNs52yCF%2F2022-09-08_18h16_15.png?alt=media&amp;token=d4012dfb-4f3f-45c6-a7a5-08bf5022c833" alt=""><figcaption><p>"Full with" section with a specific, centred CMS block</p></figcaption></figure>

***

## Full-width CSS classes

As of ThemeWare® 2.1.3 there are additional "Full-width" CSS classes: for CMS sections and blocks.

The classes are available to you if you activate the following theme configuration:

> Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes" => Load CSS "max-width" classes (optional)

**CSS classes**

| Klasse                     | Bereich        | Funktionsbeschreibung                                                               |
| -------------------------- | -------------- | ----------------------------------------------------------------------------------- |
| **twt-cms-max-width**      | Section, Block | Sets the maximum width to the "maximum container width" of the theme configuration. |
| **twt-cms-max-width-500**  | Section, Block | Sets the maximum width to 500px.                                                    |
| **twt-cms-max-width-576**  | Section, Block | Sets the maximum width to 576px.                                                    |
| **twt-cms-max-width-600**  | Section, Block | Sets the maximum width to 600px.                                                    |
| **twt-cms-max-width-700**  | Section, Block | Sets the maximum width to 700px.                                                    |
| **twt-cms-max-width-768**  | Section, Block | Sets the maximum width to 768px.                                                    |
| **twt-cms-max-width-800**  | Section, Block | Sets the maximum width to 800px.                                                    |
| **twt-cms-max-width-900**  | Section, Block | Sets the maximum width to 900px.                                                    |
| **twt-cms-max-width-992**  | Section, Block | Sets the maximum width to 992px.                                                    |
| **twt-cms-max-width-1000** | Section, Block | Sets the maximum width to 1000px.                                                   |
| **twt-cms-max-width-1100** | Section, Block | Sets the maximum width to 1100px.                                                   |
| **twt-cms-max-width-1200** | Section, Block | Sets the maximum width to 1200px.                                                   |
| **twt-cms-max-width-1300** | Section, Block | Sets the maximum width to 1300px.                                                   |
| **twt-cms-max-width-1400** | Section, Block | Sets the maximum width to 1400px.                                                   |
| **twt-cms-max-width-1500** | Section, Block | Sets the maximum width to 1500px.                                                   |
| **twt-cms-max-width-1600** | Section, Block | Sets the maximum width to 1600px.                                                   |
| **twt-cms-max-width-1700** | Section, Block | Sets the maximum width to 1700px.                                                   |
| **twt-cms-max-width-1800** | Section, Block | Sets the maximum width to 1800px.                                                   |
| **twt-cms-max-width-1920** | Section, Block | Sets the maximum width to 1920px.                                                   |