# CSS-Klassen für Sektionen über die volle Breite

## Boxed-Klassen – CSS-Klassen für Full-width-Sektionen

Da die CSS-Klasse `container` nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FsJUimakQqro6M52sHIYY%2Fimage.png?alt=media&#x26;token=ba81363f-7c3d-4250-b70a-87bff4bc7a94" alt=""><figcaption><p>Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)</p></figcaption></figure>

***

## ThemeWare® CSS-Boxed-Klassen

| CSS-Klasse                | Bereich | Funktionsbeschreibung                                                                         |
| ------------------------- | ------- | --------------------------------------------------------------------------------------------- |
| **twt-cms-boxed-content** | Sektion | Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.                 |
| **twt-cms-block-boxed**   | Block   | Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px). |

#### Beispiele

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FbTr4y12O2oea79ZksjFP%2F2022-09-08_18h16_31.png?alt=media&#x26;token=043969ce-2116-4175-8197-d98092df9129" alt=""><figcaption><p>"Full with"-Sektion mit zentrierten CMS-Blöcken</p></figcaption></figure>

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FO0Bz7TJCVYI032TjvDph%2F2022-09-08_18h16_15.png?alt=media&#x26;token=8fcc552a-c8b5-4491-9e4a-9d8ea7d206a3" alt=""><figcaption><p>"Full with"-Sektion mit einem spezifischen, zentrierten CMS-Block</p></figcaption></figure>

***

## max-width-Klassen – Breite von CMS-Sektionen/-Blöcken

ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren.

> Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
>
> * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS "max-width"-Klassen (optional)

***

## ThemeWare® CSS-"max-width"-Klassen

| CSS-Klasse                 | Bereich        | Funktionsbeschreibung                                                                  |
| -------------------------- | -------------- | -------------------------------------------------------------------------------------- |
| **twt-cms-max-width**      | Sektion, Block | Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration. |
| **twt-cms-max-width-500**  | Sektion, Block | Setzt die maximale Breite auf 500px.                                                   |
| **twt-cms-max-width-576**  | Sektion, Block | Setzt die maximale Breite auf 576px.                                                   |
| **twt-cms-max-width-600**  | Sektion, Block | Setzt die maximale Breite auf 600px.                                                   |
| **twt-cms-max-width-700**  | Sektion, Block | Setzt die maximale Breite auf 700px.                                                   |
| **twt-cms-max-width-768**  | Sektion, Block | Setzt die maximale Breite auf 768px.                                                   |
| **twt-cms-max-width-800**  | Sektion, Block | Setzt die maximale Breite auf 800px.                                                   |
| **twt-cms-max-width-900**  | Sektion, Block | Setzt die maximale Breite auf 900px.                                                   |
| **twt-cms-max-width-992**  | Sektion, Block | Setzt die maximale Breite auf 992px.                                                   |
| **twt-cms-max-width-1000** | Sektion, Block | Setzt die maximale Breite auf 1000px.                                                  |
| **twt-cms-max-width-1100** | Sektion, Block | Setzt die maximale Breite auf 1100px.                                                  |
| **twt-cms-max-width-1200** | Sektion, Block | Setzt die maximale Breite auf 1200px.                                                  |
| **twt-cms-max-width-1300** | Sektion, Block | Setzt die maximale Breite auf 1300px.                                                  |
| **twt-cms-max-width-1400** | Sektion, Block | Setzt die maximale Breite auf 1400px.                                                  |
| **twt-cms-max-width-1500** | Sektion, Block | Setzt die maximale Breite auf 1500px.                                                  |
| **twt-cms-max-width-1600** | Sektion, Block | Setzt die maximale Breite auf 1600px.                                                  |
| **twt-cms-max-width-1700** | Sektion, Block | Setzt die maximale Breite auf 1700px.                                                  |
| **twt-cms-max-width-1800** | Sektion, Block | Setzt die maximale Breite auf 1800px.                                                  |
| **twt-cms-max-width-1920** | Sektion, Block | Setzt die maximale Breite auf 1920px.                                                  |