Support » Allgemeine Fragen » Gutenberg Spalten, mobile und tablet: automatische Stapelung verhindern?

  • Hallo!

    Ich baue gerade meinen Online-Shop auf und arbeite für die Shop-Page mit Gutenberg-Blocks. Das funktioniert sehr gut und sogar Woocommerce-Blocks lassen sich darin problemlos einbauen.
    Allerdings gelingt mir mein Wunsch-Layout nur auf dem Desktop. In der Mobile-Version und der Tablet-Version agiert es zwar responsive, aber überhaupt nicht kontrollierbar:
    Es zerlegen sich alle Spalten in ihre einzelne Felder. stapeln sich also eins auf eins übereinander. Ich würde gerne von einem vier-Spalten-Layout im Desktop auf z.B. ein zwei-Spalten-Layout im Mobile wechseln.
    Wo kann ich die Einstellungen verwalten? In meiner Seitenleiste finde ich keine Möglichkeit.

    Alle Versionen sind auf dem aktuellen Stand.

    Vielen Dank für einen Tipp!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Hallo,
    leider kann ich das nicht nachvollziehen. Hier sieht alles optisch ok aus.
    Allerdings kann man in der Developer Console (Aufruf mit F12) sehen, dass einige Javascript-Dateien des Themes nicht geladen werden können.
    Wir können dir bei gekauften Themes oder Plugins so gut wie gar nicht helfen, weil sie uns nicht zur Verfügung stehen. Wir müssten sonst bei jeder Frage erst einmal das passende Theme oder Plugin kaufen, uns dort einarbeiten und dann kostenlos den Support anbieten, für den du beim Kauf eigentlich bezahlt hast. Du solltest dich in dem Fall an den Entwickler wenden. Lies bitte auch mal in der FAQ (B 5.) zu diesem Thema.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller insaslalala

    (@insaslalala)

    Hallo Hans-Gerd,
    Vielen Dank! Wegen der Developer-Console: tausend Dank, ich werde das überprüfen.
    Mein Shop ist noch nicht öffentlich, deshalb ist das Problem tatsächlich noch nicht sichtbar. Entschuldige.
    Ich habe jetzt eine Test-Seite erstellt, auf der es zu erkennen ist: https://thesalonette.de/test-seite/
    Ich gehe eigentlich davon aus, dass es sich um Einstellung an den Blocks, also in Gutenberg / WordPress handelt. Oder liege ich da ganz falsch?
    Ich freue mich sehr über Deine Einschätzung,
    viele Grüsse
    Insa

    Hallo Insa,
    ich kann das hier überhaupt nicht nachvollziehen: Meinst du die Bilder („Dolce Vita“, „Little Tenderness“, etc.)? – das sieht für mich auch mobil ok aus. In der Developer Console kannst du das mit verschiedenen Geräten simulieren. Aber auch auf meinem Smartphone (Huawei) sieht das ok aus.
    Viele Grüße,
    Hans-Gerd

    Thread-Ersteller insaslalala

    (@insaslalala)

    Hallo Hans-Gerd,
    Danke Dir. Vielleicht bin ich da zu kompliziert… Ich möchte, dass die Bider im mobil Modus in Zweierspalten (oder sogar Dreierspalten) stehen, nicht alle einzeln gestapelt.
    Das heisst „Dolce Vita“ und „Little Tenderness“ nebeneinander auf dem Handy und nicht untereinander…
    Vielen Dank, Insa

    Hallo Insa,
    das hat mit dem Theme und nicht mit dem Block-Editor (Spalten) zu tun.
    Über Media Queries (CSS) könnte man das prinzipiell unter Design > Customizer > Zusätzliches CSS einstellen. Das ist aber nicht empfehlenswert, weil die Bilder auf mobilen Geräten viel zu klein wären.
    Viele Grüße,
    Hans-Gerd

    Thread-Ersteller insaslalala

    (@insaslalala)

    Hallo Hans-Gerd,
    vielen Dank! Nun weiss ich endlich, wo ich dran drehen müsste… super!
    Viele Grüsse
    Insa

    Das Theme verwendete einige Media-Queries, also CSS-Regeln in Abhängigkeit der angezeigten Bildschirmbreite. Für die einspaltige Darstellung ist z.B. die CSS-Regel

    @media (max-width:599px) {
     .wp-block-column {
      flex-basis: 100% !important;
     }
    }

    zuständig, die du mit einer eigenen CSS-Regel im Customizer überschreiben könntest, um eine zweispaltige Darstellung zu erzeugen:

    @media (max-width:599px) {
     .wp-block-column {
      flex-basis:48% !important;
      margin-right: 1%;
     }
    }

    (nicht ganz sauber programmiertes Beispiel – der Abstand zwischen den Spalten sollte nicht mit margin-right erzeugt werden)

    Dann müssten allerdings die CSS-Regeln für die Beitragsbilder angepasst werden und wahrscheinlich einige andere Änderungen vorgenommen werden.

    Bei gekauften Themes können wir nur sehr eingeschränkt helfen, weil sie uns nicht zur Verfügung stehen. Ich nehme aber an, dass das Theme keine Optionen anbietet, um wahlweise eine mehrspaltige Darstellung auf mobilen Endgeräten einzustellen. Du wirst also entweder einen Kompromiß machen müssen oder du erstellst ein Child-Theme mit diversen Änderungen im Stylesheet, die aber vermutlich umfangreicher (also kostenintensiver) ausfallen.

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Das Thema „Gutenberg Spalten, mobile und tablet: automatische Stapelung verhindern?“ ist für neue Antworten geschlossen.