How to Fix Elementor Full Width Stretch

Der beliebte Webseiten Baukasten Elementor hat vor ein paar Updates die Flex-Container eingeführt. Der Vorteil darin besteht, dass weniger Code im Quellcode landet und Webseiten schneller geladen und ein besseres Google-Ranking erhalten.

Doch alles was Vorteile bringt, schafft auch ein paar Nachteile. Es ist nicht mehr möglich, Container zu erstellen und diese über die komplette Webseitenbreite zu strecken.

Vor dem Update hatte man noch die Möglichkeit, die Inhaltsbreite auf “Volle Breite” zu definieren und zusätzlich den Abschnitt zu strecken.

Mit der Einführung der neuen Flex-Box Container ist dies allerdings nicht mehr möglich. Hier fehlt in den Container-Einstellungen die Stretch Option vollständig.

Wahrscheinlich wird dieses Problem mit späteren Updates behoben werden. Bis es soweit ist, kannst du dir mit etwas CSS selbst helfen. Du musst dem Container lediglich eine CSS-Klasse definieren. Für mein Beispiel habe ich die Klasse in fullwidth_fix benannt.

CSS Style für den Full width stretch Fix

Jetzt musst du lediglich in deiner CSS Datei diesen CSS-Code hinzufügen. Damit sollte das Problem vorerst behoben sein.

.fullwidth_fix {
        left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw!important;
	position: relative!important;
	right: 50%;
	width: 100vw!important;
}

Konnte ich dir helfen? Lass es mich gern wissen.