Veröffentlicht am Schreib einen Kommentar

How to Fix Elementor Full Width Stretch

Elementor Full width stretch fix

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.

Elementor Full width stretch fix Abschnitt 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.

Elementor Full width stretch fix Flex-Box Container

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.

Elementor Full width stretch fix CSS Klasse definieren

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.

Weitere Tipps und Tricks

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

zwölf − acht =