In Layouts wird der Inhaltsbereich gerne in einem Wrapper bzw. Container in der Breite begrenzt und zentriert. Bei Bootstrap zum Beispiel mit der Klasse .container
. Allerdings sind so alle Kindelemente ebenfalls in der Breite begrenzt. Möchte man einzelne Elemente (z.B. ein Hero-Slider) trotzdem auf 100% der Fensterbreite bekommen, ohne auf die Begrenzung für alle anderen Elemente zu verzichten, ist folgendes CSS-Snippet sehr hilfreich:
.edge2edge { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
Die Klasse .edge2edge
kann dann auf alle Elemente gesetzt werden, die aus dem Wrapper „ausbrechen“ sollen.