Wenn in einem Grid der Content links innerhalb des Containers, das Bild rechts jedoch bis rechten Site-Border stretchen soll, benötigen wir ein wenig CSS.
Hierfür müsste in den Post/Page-Settings entweder der Content Container auf Full-Width gesetzt werden (betrifft die ganze Page), oder der einzelne Container.
Die Reihenfolge von Bild- & Text-Container auf mobile wird in der mobilen Ansicht im Editor festgelegt. Dann erscheint im Container > Layout unterhalb von “Remove vertical gap” das “Order” Feld.
Beispiel (von Orbilan):
Bild links stretch
Die Bilder müssen als BG im internen Container angelegt werden mit einer min-height, z.B. 400px für mobile.
Der äußere Container bekommt die Class breakout-container
Die Bilder-Container bekommen die Class breakout-right bzw. breakout-left
Bild rechts stretch
CSS:
@media(min-width: 769px) {
.breakout-container {
position: relative;
overflow: hidden;
}
.breakout-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
}
.breakout-left {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
}Eine weitere ggf. bessere Lösung (zumindest ohne Grid) bietet sich über die neuen Flexbox Optionen von GenerateBlocks an. Mike Oliver demonstriert dies in seinem Post in der Community “How the Split Screen Works on Page Hero One“.