WP Instagram Widget horizontale Anordnung

    Hallo,
    ich verwende Wordpress nun schon seit ein paar Jahren.
    Das ist mein erstes Thema, da ich mir sonst immer recht gut selbst helfen konnte.
    Leider bin ich nun an einem Problem, dass ich nicht hinbekomme.
    Ich benutze ein Theme mit Footer Widgets, Links und Rechts sind zwei individuelle Menüs und in der Mitte das WP Instagram Widget.
    Dieses habe ich auf 3 Bilder eingestellt, leider gibt es keine Einstellung für die Anordnung, so werden die 3 Bilder immer vertikal untereinander angezeigt, was meinen Footer extrem lange macht und doof aussieht.
    Ich hätte die 3 Bilder gerne horizontal geordnet, das mein Footer wie folgt aufgebaut ist:
    MENÜ / BILD 1 BILD 2 BILD 3 / MENÜ

    Bin auf jede Antwort gespannt.
    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

    Lieber Graemmlin. Auf den Link zum Pixelbild brauche ich gar nicht zu klicken. Das kann ich mir vorstellen, wie drei Bilder untereinander aussehen. Und dass ein Footer damit unförmig hoch wird … Nur: Aus einem Pixelbild kann man nicht auslesen, warum die Bilder untereinander stehen.

    Mutmaßlich, weil sie in irgendwelchen Block-Elementen „verpackt“ sind, und die ordnen sich nunmal standardmäßig untereinander an, solange sie nicht ein float erhalten oder mit display: table; oder display: flex; ein entsprechendes „Anordnungsverhalten“ des ganzen Ensembles definiert wird.

    Wenn du uns den Link nicht schreiben magst: Schnapp dir die Webentwickler-Tools deines Browsers, lies damit aus, um welche Elemente es geht, und packe in die CSS-Datei deines Child-Themes oder in eine Custom-CSS-Datei die benötigten Definitionen.
    Beim Überschreiben von Definitionen aus einem PlugIn kommt es relativ häufig vor, dass die Definition erst mit !important greift.

    Gruß
    helix

    Wenn du die Definition

    Code
    .footer_box ul li {
    margin-bottom: 8px;
}


    ergänzst mit

    Code
    float: left;


    kommen bei mir schonmal zwei der Bilder nebeneinander (das ist abhängig von der Größe des Browserfensters).
    Das dritte Bild „passt“ nicht mehr hin, soweit ich sehe, zunächst einmal auch bei größerem Bildschirm / Browserfenster nicht. Da musst du dann mit der Breite des übergeordneten ul-Elements spielen. Oder evtl. auch mit den Randabständen der benachbarten Elemente. Das habe ich jetzt nicht genauer untersucht.

    Gruß
    helix

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden