Man gibt sich Mühe, eine Website auf dem Desktop ansprechend zu gestalten und freut sich über die erzielten Resultate. Testet man dann sein Werk auf Responsiveness stellt man fest: die Spalten- bzw. Zeilenreihenfolge schaut auf dem Tablet ganz anders aus. Und auf dem Smartphone kommt erst ein Text, dann ein Bild, dann wieder ein Bild und wieder Text. Auf dem Desktop sieht doch alles so schön aus…
Das kennt wohl jeder, der nicht gerade „Mobile first“ entwickelt. Wie man diesen Unterschieden mit ein wenig CSS zu Leibe rückt, ist Inhalt dieses Beitrags. Wie immer: ohne Plugins!
Wie immer möchte ich darauf hinweisen, dass ich die Installation eines Child-Themes empfehle um den eigenen Code vor Überschreiben durch Updates zu schützen.
Wie man das macht kannst du hier nachlesen.
1. Bild -> Text -> Text -> Bild
Fall Nummer 1 zeigt ein typisches Problem, das mit der Arbeit mit Divi auftauchen kann. Zwei Zeilen mit je zwei Spalten sehen auf dem Desktop so aus. Die Abfolge Bild -> Text -> Text -> Bild ist hier gewollt und macht auch Sinn:
So sieht es auf einem Tablet aus (Hochformat):
So sieht es auf einem Smartphone aus (Hochformat):
Was auf dem Desktop noch funktioniert, stört hier. Die Aufteilung von Bild – Text – Text – Bild ist verwirrend.
Das heisst, wir müssen die zweite Zeile mit den zwei Spalten für Tablet und Smartphone umkehren, damit wir die Reihenfolge Bild -> Text -> Bild -> Text bekommen. Das können wir mit einer CSS-Klasse und vier Zeilen CSS-Code lösen.
Dazu vergeben wir der zweiten Reihe in den Einstellungen -> Erweitert -> CSS-ID & Klassen die Klasse reverse (ohne Punkt), und fügen im WordPress Backend unter Design -> Theme-Datei-Editor -> style.css folgenden CSS-Code ein:
/* Spaltenreihenfolge auf Mobile umkehren */
@media ( max-width: 980px ) {
.reverse {
display: flex;
flex-direction: column-reverse;
}
}Das Gute an der Klasse, die wir hier vergeben haben: wenn du irgendwo auf deiner Seite wieder Spalten umkehren möchtest, musst du nur noch die Klasse „reverse“ vergeben. Fertig!
Resultat Tablet:
Resultat Smartphone:
2. Verschiedene Spaltenbreiten auf Tablet
Die nächste Herausforderung ist das Definieren verschiedener Spaltenbreiten auf dem Tablet. Im Gegensatz zum Smartphone verfügt ein Tablet über mehr Bildschirm, sodass manchmal zwei Spalten nebeneinander angezeigt werden sollen.
Wir haben folgende Ausgangslage (Desktop):
So sieht es „original“ auf dem Tablet aus:
Hier nützt uns „.reverse“ nichts, denn die Reihenfolge Text -> Kästchen -> Kästchen soll beinehalten werden.
Auf dem Smartphone ist das auch ok, weil hier die Inhalte sowieso in der richtigen Reihenfolge untereinander angezeigt werden.
Aber auf dem Tablet sähe es doch knackig aus, wenn der Text über die gesamte Breite des Bildschirmes gehen würde, die Kästchen darunter aber nebeneinander dargestellt würden.
Also vergeben wir wieder Klassen und schreiben ein wenig CSS-Code. Zuerst geben wir der gesamten Zeile in den Einstellungen -> Erweitert -> CSS-ID & Klassen die Klasse ad-tablet-layout-tbb.
- ad ist mein Kürzel, damit ich nicht zufälligerweise in Konflikt mit bestehenden IDs oder Klassen komme. Das Kürzel setze ich vor alle meine IDs und Klassen
- tablet-layout ist selbsterklärend
- tbb bedeutet „text-bild-bild“; so weiss direkt, um welches styling es sich handelt.
Nun fügst du den CSS-Code wieder in die style.css Datei:
/*** Tablet Layout TBB ***/
@media (max-width: 980px) {
.ad-tablet-layout-tbb .et_pb_column {
display: flex;
flex-wrap: wrap;
}
.ad-tablet-layout-tbb .et_pb_column:nth-child(1) {
width: 100%; /* Erste Spalte nimmt volle Breite */
}
.ad-tablet-layout-tbb .et_pb_column:nth-child(2),
.ad-tablet-layout-tbb .et_pb_column:nth-child(3) {
margin: 0;
width: 50%; /* Zweite & Dritte Spalte teilen sich die Zeile */
}
}Resultat
3. Bonus: Horizontales Scrollen verhindern
Manchmal kommt es vor, dass einzelne Elemente auf der Website ein klitzekleines bisschen über den Rand des Bildschirms (Viewport) hinausragen. Meistens so minim, dass sich eine Suche nach dem Übeltäter gar nicht wirklich lohnt.
Der Nachteil ist aber, dass damit horizontales Scrollen auf dem Smartphone ermöglicht wird.
Ich nerve mich immer, wenn ich beim Scrollen auf dem Smartphone die Seite hin- und herschieben kann.
Mit einem einfachen Media-Query und einem CSS-Einzeiler lässt sich das Problem unterbinden:
#page-container {
overflow-x: hidden;
}Ich hoffe, Du kannst die hier vorgestellten Codeschnipsel brauchen. Diese sind nachhaltig, da wiederverwendbar bzw. recyclebar. Sie können mit kleinen Änderungen einfach an deinen Gusto angepasst werden, ohne dass du von Beginn weg alles neu erfinden musst.
0 Kommentare