# 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.                                                   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-classes-for-full-width-sections.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.