Medien und Text Block Stapelung bei Mobilgeräten ändern

Wenn du den Medien und Text Block des neuen Block-Editors verwendest, kannst du rechts in den Einstellungen auswählen das es bei kleinen Displaygrössen gestapelt werden soll.

Ohne diese Auswahl bleibt es bei der zwei Spaltenansicht, auch auf mobilen Geräten. Durch die Aktivierung werden die Spalten dann nacheinander angezeigt. Das ist aber nicht immer das optimale Verhalten. Wie du das ändern kannst zeige ich dir in diesem Beitrag.

Hier gleich mal ein Bild damit der verstehst was ich meine 😉

Medien und Text Block | Links in Grau ist die Desktopansicht, in der Mitte in Rot ist das Standardverhalten wenn es auf mobilen Geräten gestapelt werden soll, wie ich mir das ganze gewünscht habe siehst du rechts in Gelb
Medien und Text Block | Links in Grau ist die Desktopansicht, in der Mitte in Rot ist das Standardverhalten wenn es auf mobilen Geräten gestapelt werden soll, wie ich mir das ganze gewünscht habe siehst du rechts in Gelb

Wenn die Medien-Seite links ist sieht das auf mobil auch so aus wie ich es mir wünsche.

Aber sobald die Medien-Seite rechts dargestellt wird kommt in der mobilen Ansicht immer zuerst der Text. Das möchte ich sehr gern ändern.

Dank der entsprechenden CSS-Klassen (.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right) ist das auch wirklich sehr einfach möglich.

Denn mit dieser Klasse spreche ich wirklich nur die Blöcke an deren Medien auf der rechten Seite sind und gestapelt werden sollen.

Das einzige auf das du jetzt noch achten muss ist, dass es wirklich nur bis zum Breakpoint anders gestapelt werden soll. Das erledigst du über eine Medienabfragen (Media Queries) und beschränkst das ganze auf eine Breite von 600px. Hier solltest du aber nochmal genau schauen ob dein WordPress Theme den selben Breakpoint nutzt oder einen anderen.

Alles in allem sieht die Lösung dann so aus:

@media only screen and (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
      grid-template-areas: "media-text-media" "media-text-content";
  }
}

Diesen Code-Snippet kannst jetzt entweder in deine style.css des Child Themes einfügen oder im Customizer unter Zusätzliches CSS einsetzen.

Sobald du das ganze gespeichert und aktualisiert hast funktioniert es direkt.

Ich habe das ganz auf meiner Service-Seite genau so umgesetzt.


Kommentare

Eine Antwort zu „Medien und Text Block Stapelung bei Mobilgeräten ändern“

  1. Hallo, hast du einen Vorschlag, wie ich die Reihenfolge der Spalten des columns Blocks beeinflussen kann?

    Auf Desktop sieht es so aus:
    Icon / Text
    Text / Icon
    Icon / Text

    Auf Mobil sieht es aktuell so aus:
    Icon
    Text
    Text
    Icon
    Icon
    Text

    Aber ich möchte:
    Icon
    Text
    Icon
    Text
    Icon
    Text

    Ich würde mich sehr über Hilfe freuen!

Schreibe einen Kommentar zu Karin Antworten abbrechen

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