Inhaltsbreite auf großen Bildschirmen

Jetzt das andere Ende: große Bildschirme. Stelle die Vorschau auf 1280 px. Die Seite füllt die ganze Breite: Das Logo steht ganz links und der Button „Spenden“ ganz rechts. Auf einem Monitor mit 1920 px Breite wäre jede Karte über 400 px breit, und die Texte der Schritte würden in langen Zeilen laufen. Je breiter der Bildschirm, desto weiter rückt alles auseinander.

Darum hat der Inhalt der meisten Websites eine maximale Breite und bleibt in der Mitte, während die Hintergründe der Abschnitte weiter über den ganzen Bildschirm laufen. Beide Klassen kennst du aus der Lektion über Abstände und Größen: max-w-* legt die maximale Breite fest, und mx-auto zentriert das Element. Für den Inhalt einer Seite sind Breiten von max-w-5xl (64rem, 1024 px) bis max-w-7xl (80rem, 1280 px) üblich.

Wir setzen sie nicht auf die Abschnitte selbst, denn dann wären auch deren Hintergründe schmal. Sie kommen auf das Element in jedem Abschnitt, das seinen Inhalt enthält:

<section class="bg-white px-4 md:px-8">
	<div class="mx-auto max-w-5xl">...</div>
</section>

Diese Klassen brauchen kein Präfix. Ein Block-Element ist ohnehin so breit wie sein Elternelement, und max-w-5xl verhindert nur, dass es über 1024 px hinauswächst. Auf einem schmalen Bildschirm füllt es sein Elternelement einfach aus, genau wie mit max-width im Abschlussprojekt des CSS-Kurses.

Wenn der ganze Inhalt einer Seite dieselbe maximale Breite hat, liegen sein linker und sein rechter Rand untereinander, von der Kopfzeile bis zur Fußzeile.