Trick # 176 | Dieser Beitrag beinhaltet 1108 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Divi-Theme macht das Responsive Layout – also die Darstellung für alle Anzeigengrössen – einfacher. Sehr viel einfacher. So werden etwa nebeneinander platzierte Inhalte auf kleinen Anzeigegrössen gestapelt. Dabei wird aus dem «links nach rechts »auf dem Desktop neu «oben nach unten» auf dem Mobiltelefon. Das passt meistens – aber nicht immer. Den Sonderfall kriegen wir aber mit ein paar Zeilen CSS-Code hin.
Die Sache ist nicht ganz einfach zu umschreiben. Darum bauen wir mal kurz ein Beispiel. Eins mit folgendem fünspaltigen Layout:
Inhalt #1
Inhalt #2
Inhalt #3
Inhalt #4
Inhalt #5
Auf Mobilgeräten sieht das dann ungefähr so aus:
Die Elemente werden in der Desktop-Ansicht von links nach rechts angezeigt und in der Ansicht auf dem Mobilgerät in derselben Reihenfolge von oben nach unten gestapelt,
In den allermeisten Fällen ist das absolut OK. Dann und wann mag es aber sinnvoll sein, die genau umgekehrte Stapelfolge zu beabsichtigen. Auch das geht.
Sie benötigen dazu den folgenden CSS-Code, welchen Sie in das Stylesheet Ihrer Divi-Website einfügen. Das geschieht unter Design/Customizer/Zusätzliches CSS:
@media (max-width:980px) {
.reverse-columns-mobile {
display: flex;
flex-direction: column-reverse;
}
}
Nun packen wir noch einmal das 5-Spalten-Layout von oben – hinterlegen aber in der entsprechenden Divi-Zeile (oder Row) noch die Klasse aus dem CSS-Code «reverse-columns-mobile». Unter Erweitert/CSS-ID & Klassen/CSS-Klassen.
In der Desktop-Ansicht ändert sich zunächst mal gar nichts. Da präsentiert sich die Darstellung dann so:
Inhalt #1
Inhalt #2
Inhalt #3
Inhalt #4
Inhalt #5
Doch – Tataa – auf Mobilgeräten ist der Content nun umgekehrt sortiert.
Kann gelegentlich mal ein hilfreicher Hack sein.
Werbung
Werbung
