Theme Brasserie Header anpassen

    Guten Tag,

    ich benutze die aktuelle WP Version.
    Theme ist, wie erwähnt, Brasserie.
    Url: http://www.mahns-chateau.de

    Ich möchte die Größe der Headerbilder verändern, diese werden offensichtlich per Styleanweisung auf die gesamte Bildschirmbreite gestreckt. Mir schwebt vor, die Größe auf ca. 50% zu reduzieren und sie zentriert darstellen zu lassen. Ich habe diverse Änderungen in der style.css und der function.php durchgeführt, allerdings mit unsauberen Resultaten. Ich habe versucht, die Lösungen für andere Themes zu adaptieren, allerdings ohne Erfolg. Vermutlich liegt die Lösung direkt vor meiner Nase, allerdings fehlt mir die Erfahrung sie zu erkennen.

    Vielen Dank im Voraus für eure Hilfe

    Johannes

    • 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

    Hi,

    die Frage lautet: wie schaffe ich es, dass das header image mittig und um 50% verkleinert dargestellt wird (auf der Startseite und allen Unterseiten). Meine bisherigen Versuche das mittels fester Werte für die Margin zu erreichen, führten zu einer unsauberen Darstellung auf Handy und Tablet, entweder wurde die Grafik nicht mehr angezeigt, oder aber mit wechselnden Abständen nach links und rechts.

    Zitat von ElBoWu

    Hi,

    die Frage lautet: wie schaffe ich es, dass das header image mittig und um 50% verkleinert dargestellt wird (auf der Startseite und allen Unterseiten).


    Zum Beispiel so:

    Code
    .header-image {
    margin: 0 auto 100px;


    width: 50%;




}
    Zitat von ElBoWu

    Meine bisherigen Versuche das mittels fester Werte für die Margin zu erreichen, führten zu einer unsauberen Darstellung auf Handy und Tablet, entweder wurde die Grafik nicht mehr angezeigt, oder aber mit wechselnden Abständen nach links und rechts.

    Wenn du auf Tablet und Smartphone eine andere Darstellung haben möchtest, musst du mit Media-Queries arbeiten:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Hi,

    danke für die Antwort. Wie es häufiger so ist: nachdem ich mein Problem ein mal in Worte gefasst hatte, kam ich selbst auf die Lösung. Width 50% war klar, die margins habe ich mit margin-left:33%; margin-right: 33% angegeben, was zu einer korrekten Darstellung auf allen Endgeräten führte. In jedem Fall noch mal danke.

    Zitat von ElBoWu

    Hi,

    danke für die Antwort. Wie es häufiger so ist: nachdem ich mein Problem ein mal in Worte gefasst hatte, kam ich selbst auf die Lösung. Width 50% war klar, die margins habe ich mit margin-left:33%; margin-right: 33% angegeben, was zu einer korrekten Darstellung auf allen Endgeräten führte. In jedem Fall noch mal danke.

    Bei mir auf dem Smartphone hängt das Bild jetzt allerdings zu weit rechts. Was ja auch logisch ist, weil 50+33+33 irgendwie mehr als 100 ergibt ;)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden