Für die passende responsive Darstellung der Inhalte auf unterschiedlichen grossen Ausgabemedien (Devices) gibt es drei sogenannte Media-Queries:

Die Übergänge (Breakpoints) befinden sich horizontal gesehen bei diesen Device-Grössen:

Auf Detailseiten befinden sich zwei zusätzliche Breakpoints:


Hier die wichtigsten Änderungen, die durch die Breakpoints ergeben:


< 1120px Breite:

Zusätzlich auf der Startseite:


< 768px Breite:


Maximale Breite einer Website

Der Inhaltsbereich der Website weist eine maximale Breite von 1350px auf. Inklusive des Abstandes rechts und links hat eine Inhaltsseite also bei etwa 1440px Breite Ihre maximale horizontale Ausdehnung erreicht. Oberhalb dieser maximalen Ausdehnung (siehe links die Screens «L») werden nur noch die Abstände rechts und links zum Browserfenster grösser, der Inhaltsbereich selbst nicht mehr. Dieser ist grundsätzlich horizontal mittig im Browserfenster ausgerichtet.

Unterhalb der Maximal-Breite ist der Abstand des Seiteninhaltes zum Browserfenster im CSS wie folgt definiert:

Den verbleidenden Rest (mathematisch: 95.2% - 24px) beansprucht der eigentliche Seiteninhalt. Das ergibt beispielsweise bei einer Browserfenster-Breite von 1000px ein Abstand von 36px rechts und links und eine Seiteninhalt-Breite von 928px.