CSS für Anfänger: Größe des Header-Bereichs

    Hallo zusammen,

    ich habe gerade ein Website-Projekt gestartet und mich für ein Wordpress-Theme entschieden, bei dem man in der Free Version die Größe des Header-Bildes bzw. des Header-Bereichs nicht verändern kann. Ich hoffe, dass ich das nun via CSS lösen kann - obwohl ich, ehrlich gesagt, keine Ahnung von CSS habe. Ich hoffe, dass ich's mit eurer Hilfe irgendwie trotzdem hinbekomme.

    Das Problem: Das Header-Bild ist zu groß, man muss erst scrollen, bevor man zum Content gelangt. Es geht um diese Website: https://vitale-lebensmittel.de/ Über die Chrome-Konsole habe ich herausgefunden, dass ich nicht nur den site-header, sondern auch den site-title und die site-description anpassen muss. Ansonsten hängen Seiten-Über- und -Unterschrift irgendwo im Nirgendwo.

    Hab ich ne Chance, das über diesen Weg (diesen Foren-Beitrag) zu lösen oder stelle ich mir das zu einfach vor? Ich hatte gehofft, dass mir jemand durchgeben kann, was ich in die style.css eintippen muss.

    Viele Grüße!
    Leon

    • 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

    Im Code der Seite steht bereits CSS dazu, allerdings fehlerhaft:

    Code
    .site-branding { padding-top: px; }
        .site-branding { padding-bottom: px; }


    Du kannst z.B. in Design > Customizer > Zusätzliches CSS sowas hier versuchen:

    Code
    .site-branding {
    padding-top: 5px;
    padding-bottom: 5px;
}

    Wahlweise auch in style.css, dann ggf. mit !important, allerdings sollte man dann ein Child-Theme (google) verwenden...

    Großartig, thx a lot! :-) Jetzt hängen allerdings noch Headline und Sub-Headline am unteren Rand des Headers. Kann man die noch irgendwie zentrieren?

    Das Bild kann nicht zu groß sein - als Hintergrund belegt es nämlich keinen Platz!
    Die angezeigte Größe (Höhe) des 'Headers' wird allein durch dessen Inhalt bestimmt.
    In den im Header vorhandenen Elementen lässt sich mit einfachen CSS Formatierungen eigentlich nur, wie @b3317133 schon ausführt hat, das Element mit der Klasse '.site-branding' in der Höhe manipulieren, da die Padding Werte dort eher groß sind

    HTML
    .site-branding {
    padding: 110px 10px 135px 10px;
}


    Reihenfolge der Werte ... oben - rechts - unten - links.

    Zitat von FlBall

    Kann man die noch irgendwie zentrieren?

    Die für Dich passenden Werte musst Du schon selbst rausfinden, keiner kann wissen, wie Du Dir das Design vorstellst, am besten wenigstens versuchen zu verstehen, was da passiert, siehe z.B. auch Erklärung von @Sailor56, nicht nur einfach Copy & Paste...

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden