Okay
  Public Ticket #1933111
Image Gallery Abstand
Closed

Comments

  • Fine started the conversation

    Lieber Marc, liebe Ellen,

    Ich würde gerne Bilder über die WP-Gallerie-Funktion in eine Seite einfügen. Leider kommen die bei diesem Theme dann ohne Abstand zueinaner. 

    Habt ihr einen CustomCSS-Tip für mich?

    Liebgruß, Fine

  • Fine replied

    Außerdem werden die Bildunterschriften nicht angezeigt. ich würde diese gerne verwenden.

    LG & DankFine

  •  828
    Marc replied

    Hallo Fine,

    das sollte so nicht sein. Kannst du mir einen Link zur betroffenen Seite zur Verfügung stellen?

    Viele Grüße
    Marc

  •   Fine replied privately
  •  828
    Marc replied

    Hallo Fine,

    ich kann leider kein Problem mit den Abständen erkennen. Wenn ich das richtig sehe, verwendest du nicht den neuen Block-Editor. Kannst du mir einen Screenshot von dem Problem erstellen und mir sagen welchen Browser du verwendest?

    Bitte verwende den folgenden ergänzenden CSS-Code um auch auf Seiten die Bildbeschreibung darzustellen:

    .page .gallery .gallery-item .gallery-caption {
        display: block;
    }

    Viele Grüße
    Marc

  • Fine replied

    Lieber Marc,

    danke für den CSS-Code, das hat schon mal geklappt!

    die Galerie mit Abständen funktioniert nur, wenn ich "Vorschaubild wähle" und dann auch nur für quadratische Elemente. Darunter die Galerie ist mit Bildgröße "Mittel" gewählt, da siehst du es: https://99facetsofagile.de/startseite-logo-entwurf/

    Wenn ich den Block-Editor nutze, bekommen die Galerie-Bilder leider einen Verlauf und die Beschriftung wird darauf platziert. 

    Attached files:  Bildschirmfoto 2019-03-19 um 10.38.35.png
      Bildschirmfoto 2019-03-19 um 10.38.47.png

  • Fine replied

    Lieber Marc,

    und dann ist mir noch aufgefallen, dass die 6 Spalten der Galerie auf mobilen Devices nicht umgebrochen wird (zb. in eine oder zwei Spalten) und sich dadurch der Bildunterschrifts-Text ineinander schiebt. Sehr unschön.

    LG Fine

    Attached files:  Bildschirmfoto 2019-03-19 um 17.27.56.png

  •  828
    Marc replied

    Hallo Fine,

    vielen Dank für die ergänzenden Hinweise. Der folgende ergänzende Code sollte auch deine Bilder entsprechend mit Rand versehen:

    .gallery-columns-4 .attachment-medium,
    .gallery-columns-5 .attachment-medium,
    .gallery-columns-6 .attachment-medium {
        max-width: 93%;
        height: auto;
    }
    .gallery-columns-7 .attachment-medium,
    .gallery-columns-8 .attachment-medium,
    .gallery-columns-9 .attachment-medium {
        max-width: 94%;
        height: auto;
    }

    Der nachstehende Code kümmert sich um die Anzahl der Elemente pro Zeile auf kleineren Displays:

    @media screen and (max-width: 479px) {
        .gallery-columns-2 .gallery-item,
        .gallery-columns-3 .gallery-item,
        .gallery-columns-4 .gallery-item,
        .gallery-columns-5 .gallery-item,
        .gallery-columns-6 .gallery-item,
        .gallery-columns-7 .gallery-item,
        .gallery-columns-8 .gallery-item,
        .gallery-columns-9 .gallery-item {
            width: 100%;
        }
    }
    @media screen and (max-width: 766px) {
        .gallery-columns-4 .gallery-item,
        .gallery-columns-5 .gallery-item,
        .gallery-columns-6 .gallery-item,
        .gallery-columns-7 .gallery-item,
        .gallery-columns-8 .gallery-item,
        .gallery-columns-9 .gallery-item {
            width: 33.3%;
        }
    }
    

    Viele Grüße
    Marc

  • Fine replied

    Danke lieber Marc,

    das hat wunderbar geklappt!

    LiebgrußFine