3 Bilder nebeneinander mit der Wordpress- Galerie als Vorschaubild nicht möglich?

    Hallo zusammen,

    in diesem beitrag hier:
    https://mobil.transitfrei.de/die-erste-tour…rn-und-rapsoel/
    sind die Bilder 4, 5 und 6 über die WP- eigene Galeriefunktion eingebaut. Ich habe in der Galerie klar "3 Spalten" eingetragen.
    Die Bilder sind nur als Vorschaubild eingerichtet, Platz genug sollte also für drei Bilder nebeneinander sein?!
    Es werden aber nur 2 Bilder nebeneinander, das dritte Bild ist in die nächste Zeile gerutscht. Egal, ob ich eben 3, oder auch 2 oder 5 Spalten in der Galerie angebe.
    Jemand einen Tipp für mich, wie ich die 3 Bilder nebeneinander bekomme?
    Danke.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Derzeit sind da "5 Spalten" eingetragen.

    Das Problem liegt an einer Zeile in einem inline CSS-Block, der wahrscheinlich irgendwo in den Theme-Options oder über ein Custom CSS Plugin eingegeben wurde:

    CSS
    .gallery-item {
font-style: italic;
[COLOR=#ff0000]width: 48% !important;[/COLOR]
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5%;
line-height: 1%;
text-align: left !important;
}


    Die HTML-Ausgabe ist aber am Rande bemerkt nicht die der Standard WordPress Gallery, wahrscheinlich funkt da das Theme bzw. Plugin dazwischen.

    Einmal editiert, zuletzt von b3317133 (9. Februar 2018 um 22:08)

    Ja, guter Fund!
    Jetzt wird es tricky!
    Tatsächlich ist das von mir manuell so eingetragen als Ergebnis eines früheren Themas hier.
    Herausforderung dort war, dass ich in der Galerieansicht 2 Bilder nebeneinander haben wollte.
    Das sind die Bilder 2 und 3. Mit dem width Eintrag sind die beiden Bilder nebeneinander. Nehme ich den raus, sind die Bilder 4, 5 und 6 tatsächlich nebeneinander!
    Aber die Bilder 2 und 3 dann wieder standardmäßig untereinander.
    Mist.
    Dabei war ich so happy, dass wir die Bilder 2 und 3 nebeneinander bekommen haben.
    Tja. Muss ich mich jetzt entscheiden?
    Oder gibt es eine Zwischenlösung?

    P.S.: Ja, da stand noch 5 Spalten. War vom Testlauf. Sind jetzt wieder 3 Spalten.

    Verwende einen genaueren Selector, z.B. bei Deinem Theme für 2-spaltig:

    Code
    .gallery-columns-2 .gallery-item {
    ...
}


    oder für 5-spaltig:

    Code
    .gallery-columns-5 .gallery-item {
    ...
}


    Die entspr. class-Namen findet man über den Browser-Inspector.

    PS. Es ist nach wie vor 5-spaltig eingestellt.

    Wenn Du den gesamten manuellen [FONT=courier new].gallery-item[/FONT] Code weglässt, sollte es eigentlich vom Theme her schon richtig klappen mit der Anordnung, inkl. responsive Darstellung.

    Den Abstand unten nach der Gallery könnte man dann z.B. mit sowas erzeugen:

    CSS
    .gallery {
    margin-bottom: 15px !important;
}

    Einmal editiert, zuletzt von b3317133 (9. Februar 2018 um 22:31)

    HEUREKA!
    ich glaube das ist es!
    Also ich habe meine 2 Bilder nebeneinander mit

    CSS
    .gallery-columns-2 .gallery-item {
font-style: italic;
width: 48% !important;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5%;
line-height: 1%;
text-align: left !important;
}


    und ich habe meine 3 Bilder nebeneinander.
    Allerdings musste ich sowohl das width und auch einige pading- Elemente entfernen, damit die 3er Reihe mit den Bildern nebeneinander angeordnet werden.
    So aber scheint es zu klappen!

    CSS
    .gallery-columns-3 .gallery-item {
font-style: italic;
padding-bottom: 5%;
line-height: 1%;
text-align: left !important;
}
    Zitat von b3317133

    Wenn Du den gesamten manuellen Code weglässt, sollte es eigentlich alleine richtig klappen mit der Anordnung.

    Hmm. Die Bildunterschrift kursiv, linksbündig zum Bild ausgerichtet und der Abstand der Bildunterschrift war die allererste Aufgabenstellung. So entstand dieser manuelle Codeschnipsel.
    Nehme ich alles raus, bliebe dieses Problem wieder ungelöst.

    Probiere es mal damit, ohne den restlichen Code.

    CSS
    .gallery-item {
    font-style: italic;
    line-height: 1em;
    text-align: left !important;
}
.gallery {
    margin-bottom: 1em !important;
}


    Und ohne die leeren Absätze im Beitrag oberhalb und/oder unterhalb der einen oder anderen Gallery.

    Einmal editiert, zuletzt von b3317133 (9. Februar 2018 um 22:55)

    Das ist es!!...fast. ;-)
    In der Desktop- Ansicht super!
    Schiebt man das Browserfenster aber klein, berühren sich beim responsiven Schrumpfen die Bilder wieder.
    Das wollte ich seinerzeit auch eliminieren. grmpf.
    Bekommst du da noch im Code einen Abstand zwischen den Bildern hin?
    Ich würde ja was probieren, aber bin unsicher und mag natürlich auch die Seite nicht kicken, wenn du selbst etwas im Code nachschauen magst.

    CSS
    .gallery-item {
    font-style: italic;
    line-height: 1em;
    text-align: left !important;
    padding-right: 2%;
    box-sizing: border-box;
}
.gallery {
    margin-bottom: 1em !important;
}


    Und das wars dann mit dem CSS-Kurs, mehr dazu siehe Suchmaschine Deiner Wahl...

    Hallo b33,
    ich danke dir herzlich für deine aufopferungsvolle Mühe!
    Ich habe mir erlaubt, dir ein kleines Dankeschön zukommen zu lassen.
    Es wird zwar deinem Aufwand nicht wirklich gerecht, soll aber auch nur eine kleine Aufmerksamkeit als Anerkennung sein.
    Schau bitte mal in deine Nachrichten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden