> 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="/files/N7dUku82wqRmIbke6ccY" 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="/files/4WQkf681RN98BCMSmvxU" alt=""><figcaption><p>"Full with" section with centred CMS blocks</p></figcaption></figure>

<figure><img src="/files/2Jg2s3s9KzFTLGM1Bl2Y" 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.                                                   |