Medien und Text Block Stapelung bei Mobilgeräten ändern

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.

  1. Hallo Herr Kurth,

    habe das gleiche Problem wie Sie bei meiner gerade im aufbau befindlichen neuen Seite. Nur das mein WP theme Kalium den tollen Code von Ihnen leider nicht annimmt bzw. ich auch nicht genau weis wo einfügen.
    Hätten Sie eine Idee für mich?
    L.G. Ralf Uhler

    1. Hey Ralf,
      dieser Code ist wirklich nur für den neuen Blockeditor (Gutenberg). Da du mit deinem Theme Kalium einen anderen PageBuilder einsetzt funktioniert das nicht. Ich werde mich die Tage bei dir per Mail einmal melden.
      Gruß

Schreibe einen Kommentar

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

Beitragsbild · Minimierung
Nächster Beitrag:

Minimierung

Minimierung