Support » Allgemeine Fragen » Bild neben Bild auf Smartphone

  • Gelöst 7kontinente

    (@7kontinente)


    Hallo zusammen

    In Gutenberg gibt es ja die Möglichkeit, zwei Bilder nebeneinander zu positionieren, also links/rechts. Auf dem Desktop ist das eine feine Sache, aber auf dem Smartphone sind die Bilder dann viel zu klein.

    Übersehe ich etwas, oder gibt es nicht die Möglichkeit, die Bilder auf dem Smartphone nicht nebeneinander, sondern untereinander zu positionieren. Damit diese auch grösser erscheinen.

    Habe bisher dafür ein Plugin genutzt, dieses wird aber nicht mehr mit Gutenberg unterstützt.

    Viele Grüsse

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

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Hallo,
    hast Du das schon mal mit Bildern in Spalten bei Gutenberg getestet ? – damit hatten wir bis dato keine Probleme.
    Viele Grüße
    Hans-Gerd

    Das lässt sich über eine eigene CSS-Regel steuern.

    Im neuen Theme Twenty Twenty wird für eine zweispaltige Galerie z.B. folgende CSS-Regel verwendet:

    .blocks-gallery-grid .blocks-gallery-image, 
    .blocks-gallery-grid .blocks-gallery-item, 
    .wp-block-gallery .blocks-gallery-image, 
    .wp-block-gallery .blocks-gallery-item {
        width: calc((100% - 16px)/2);
    }

    Mit calc((100% - 16px)/2); wird die Spaltenbreite abzüglich 16 Pixel für Ränder durch die Anzahl der Spalten (hier: 2) geteilt. Du könntest das mit einer Media-Query für kleinere Bildschirme ändern:

    @media screen and (max-width: 666px) {
      .blocks-gallery-grid .blocks-gallery-image, 
      .blocks-gallery-grid .blocks-gallery-item, 
      .wp-block-gallery .blocks-gallery-image, 
      .wp-block-gallery .blocks-gallery-item {
          width: 100%;
          margin: 5px 0;
       }
    }

    Soll das hingegen nur für eine bestimmte Galerien gelte, kannst du der Galerie in den Block-Einstellungen unter „Erweitert“ eine eigene CSS-Klasse „einspaltig“ hinzufügen, die du dann in deiner CSS-Regel verwendest:

    .blocks-gallery-grid .blocks-gallery-image, 
    .blocks-gallery-grid .blocks-gallery-item, 
    .wp-block-gallery .blocks-gallery-image, 
    .wp-block-gallery .blocks-gallery-item {
        width: calc((100% - 16px)/2);
    }

    Mit calc((100% - 16px)/2); wird die Spaltenbreite abzüglich 16 Pixel für Ränder durch die Anzahl der Spalten (hier: 2) geteilt. Du könntest das mit einer Media-Query für kleinere Bildschirme ändern:

    @media screen and (max-width: 666px) {
      .einspaltig .blocks-gallery-grid .blocks-gallery-image, 
      .einspaltig .blocks-gallery-grid .blocks-gallery-item, 
      .wp-block-gallery.einspaltig .blocks-gallery-image, 
      .wp-block-gallery.einspaltig .blocks-gallery-item {
          width: 100%;
          margin: 5px 0;
       }
    }

    Die CSS-Regel trägst du im Customizer unter Zusätzliches CSS ein.

    @hage Spalten könnten die Lösung sein. Gibt es evtl. noch eine Möglichkeit den Abstand zwischen zwei Bildern bzw. Spalten zu verringern?

    @pixolin Danke, werde erstmal die Lösung mit den Spalten weiter ausarbeiten.

    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von 7kontinente.

    Wenn Du Spalten eingestellt hast, kannst Du – nachdem Du die Bilder eingefügt hast – bei den Bildern rechts in der Spalte unter „Block“ ganz unten unter „Erweitert“ eine CSS- Klasse angeben.
    Diese Klasse kann Du unter Design > Customizer > Ind. CSS definieren, z. B. so:

    .bildabstand {
    	margin: 20px;
    }

    oder eben padding.
    Oder Du definierst die Klasse in der style.css Deines childthemes.
    Weitere Infos wie Du das per CSS gestalten kannst, findest Du z. b. hier

    Hmm… kriege da nicht hin mit dem CSS. Habe es im Customizer definiert und bei den Bildern wie beschrieben hinzugefügt. Trotzdem ändert sich leider nichts.

    Hmm… kriege da nicht hin mit dem CSS.

    vielleicht hast Du den Fehler gemacht, dass Du unter „Erweitert“ die Klasse noch mal mit Punkt hingeschrieben hast.
    Definiert wird die Klasse wie oben.
    Unter „Erweitert“ schreibst Du nur bildabstand
    Habe ich hier lokal getestet und funktioniert.

    Habe das Problem erkannt. Der Abstand ist als 1px definiert, ist aber aufgrund den Spalten immer noch viel zu breit. Wenn ich beispielsweise -20px einstelle, kommen die Bilder näher zueinander, aber dafür sprengt es das ganze Design.

    Somit denke ich, dass es eher die Lösung wäre, wenn ich einfach den Abstand zwischen den zwei Spalten (links/rechts) verringern könnte?

    evtl. funktioniert das hier unter Design > Customizer > Ind. CSS:

    .wp-block-column:not(:first-child) {
        margin-left: 1px;
    }

    Yes! Perfekt! Vielen Dank! 🙂

    gerne 🙂 – dann markiere ich das mal als gelöst.

    Kann ignoriert werden.

    • Diese Antwort wurde geändert vor 6 Monaten, 1 Woche von 7kontinente.
    • Diese Antwort wurde geändert vor 6 Monaten, 1 Woche von 7kontinente.
Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „Bild neben Bild auf Smartphone“ ist für neue Antworten geschlossen.