Abwechselnde Bild- und Textbereiche mit GenerateBlocks
Wenn du mehrere Feature-Sektionen mit Bild und Text untereinander darstellst, wirkt ein Wechsel der Bildposition oft lebendiger als eine starre Wiederholung. Dafür musst du die Reihenfolge der Blöcke nicht manuell ändern: Eine gemeinsame CSS-Klasse und eine Media Query reichen aus.
Lege in GenerateBlocks einen äußeren Section-Container, darin einen Inhalts-Wrapper und für jede Zeile einen Feature-Container an. Gib jedem Feature-Container die CSS-Klasse alternating-card. Auf Desktop und Tablet wird dann jede zweite Zeile umgedreht. Auf schmalen Mobilgeräten bleibt die normale Reihenfolge erhalten.
CSS für den Wechsel der Bildposition
https://app.magai.co/chat/7afcf6cb-abbc-473e-92dc-8ed5b2ed8b58
Outer Container (Section) + Inner Container (Content Wrapper) + Feature Container (Class: alternating-card)
Apply CSS to alternating-card:
/* Alternating Feature Cards Desktop & Tablet */
@media (min-width: 768px) {
.alternating-card:nth-child(even) {
flex-direction: row-reverse;
}
/* Optional: Adjust the spacing between the text and image on the reversed card */
/* .alternating-card:nth-child(even) > div:first-child { margin-right: 0; margin-left: 40px; } */
}