Resonsives Verhalten des Grids

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

  • S (für Smartphone Devices)
  • M (für Tablets) und
  • L (für grässere Monitore wie z.B: Laptops oder Desktop-Computer).

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

  • Übergang M / S: zwischen 1120 und 1119 px
  • Übergang S / XS: zwischen 768 und 767 px

Auf Detailseiten befinden sich zwei zusätzliche Breakpoints:

  • zwischen 1340 und 1339 px
  • zwischen 1040 und 1039 px

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


< 1120px Breite:

  • Ein Hamburger-Menü erscheint anstelle der Top-Level-Navigation.
  • Die OffCanvas-Navigation wird einspaltig (>=1120px ist sie 4spaltig).
  • Einige Inhalte im Footer verschwinden.
  • Der Jump-To-Arrow-Button wird halb so gross.

Zusätzlich auf der Startseite:

  • Die Suche verkleinert sich.
  • Die Hero-Area- & das Teaser-Grid wechseln vom 3er zum 2er Grid.

< 768px Breite:

  • Die Schriftgrössen aller Texte sowie einige Abstände in den Inhaltselementen werden kleiner.
  • Die Header-Höhe wird kleiner.
  • Das Teaser-Grid wechselt von 2er Grid zur einspaltigen Darstellung.
  • Alle Seiteninhalte werden einspaltig.

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:

  • padding-left: calc(2.4% + 12px);
  • padding-right: calc(2.4% + 12px);

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.