Headerüberschrift mobile Ansicht viel u groß Theme Twenty Seventeen

tabularaza

Hallo zusammen,
ich bin Laie im Bereich CSS und habe im Theme Twenty Seventeen folgendes Problem.
Wir haben einen recht groß geschriebenen Titel & Untertitel auf der Seite oberhalb des Menüs, welche mit dem Theme Child Theme Advanced Twenty Seventeen erstellt wurde.
Jetzt meine Frage. Welchen CSS Code muß ich nutzen, damit sich der Titel & Untertitel bei der mobilen Ansicht entsprechend verkleinert. Am PC / Notebbok sieht es ganz normal aus, nur in der mobieln Ansicht ist die Schrift nicht lesbar, sondern läuft aus dem Display heraus.
Einen Screenshoot nahe ich beigefügt.

Ich danke schon jetzt für Eure Hilfe.

Gruß
BSH

Werbepost

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

Slowmo

Zitat von tabularaza

Wir haben einen recht groß geschriebenen Titel & Untertitel auf der Seite oberhalb des Menüs ...

Genau das ist das Problem. Der Titel und Beschreibung ist etwas groß geraten, ebenso der Buchstabenabstand. Sieht so nicht sehr schön aus.

Gehe zu Design-->Customizer. Unter Advanced Header-->Site-Branding stellst Du die Schriftgröße auf 32px (statt 35px) und das Letter-Spacing auf 1px.

Dann unter Design-->Customizer-->Zusätzliches CSS das einfügen und speichern

Code

/*------------------------------------------------------
Zeilenabstand im Vereinsnamen
--------------------------------------------------------*/
.site-branding .site-branding-text .site-description {
    line-height: 31px;
}

Gruß
Sophie

tabularaza

hallo, besten dank für die Unterstützung.
1 Frage hab ich noch. Wie kann ich einstellen, dass sich die beiden Schriftzüge automatisch an die Displaygröße anpassen? Also bei nem kleinen mobile Display auch verkleinern und keine Buchstaben verschwinden? Am liebsten ohne einen Zeilenumbruch.
Danke
BSH

Slowmo

Und dann noch ...
"Bildergalerie" (mit einem L)
Herzlich [COLOR=#ff0000]w[/COLOR]illkommen ... (Adjektiv)
... Spaß beim [COLOR=#ff0000]S[/COLOR]töbern ...
8-)

Schönen Abend
Sophie

SEpp55

tabularaza,
du verwendest das Advanced Twenty Seventeen Child.

Für alle Fälle vor der Aktion ein Full-Backup anlegen (also inkl. Datenbank). Ich mache das mit All-in-One WP Migration.

Im Childordner ist eine style.css, die holst du dir mit einem FPT Programm (z.B. FileZilla) auf deinen Rechner und legst davon eine Sicherheitskopie an.
Dann öffnest du die Datei mit z.B.: Notepad++
In der ersten Textzeile steht - "Theme Name: Advanced Twenty Seventeen Child" - dann bist du richtig ;-)

Dort ersetzt du alles ab/inkl. Zeile 60 - Media (max-width: 1170px) {

CSS

@media screen and (max-width: 20em) {
    .site-title a {
        font-size: 22px !important;
    }
    .site-description {
        font-weight: 200 !important;
        font-size: 12px !important;
    }
    .wrap {
        padding-left: .2em;
        padding-right: .2em;
    }
}


@media screen and (min-width: 20em) {
    .site-title a {
        font-size: 26px !important;
    }
    .site-description {
        font-weight: 200 !important;
        font-size: 14px !important;
    }
    .wrap {
        padding-left: .2em;
        padding-right: .2em;
    }
}


@media screen and (min-width: 30em) {
     .site-title a {
        font-size: 36px !important;
    }
    .site-description {
        font-weight: 600 !important;
        font-size: 22px !important;
    }
    .wrap {
        padding-left: .2em;
        padding-right: .2em;
    }
   .ats-widget-area-advanced .widget-column {
        float: left !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .ats-widget-area-advanced .widget-column:first-child {
        padding-left: 0 !important;
    }


    .ats-widget-area-advanced .widget-column:last-child {
        padding-right: 0 !important;
    }
}


@media screen and (min-width: 48em) {
        .site-description {
        font-weight: 600 !important;
        font-size: 35px !important;
    }
    .wrap {
        padding-left: 2em;
        padding-right: 2em;
    }
}
@media screen and (max-width: 48em) {
    .ats-widget-area-advanced .widget-column {
        width: 100% !important;
    }
}


@media (max-width: 1170px) {
    .ats-preview.ats-layout-boxed #page,
    .ats-preview.ats-layout-boxed .site-navigation-fixed {
        max-width: 960px;
    }
}

Alles anzeigen

Danach wieder über FTP hochladen und sehen obs das ist, was du willst. ;-)

Wenn nicht alte Datei wieder hochladen.

Gast 100035

Zitat von SEpp55

Ich mache das mit All-in-One WP Migration.

Sicher jetzt OT, aber trotzdem die Frage: wie ich gelesen habe ist das doch gut für Migration und auch für Backup, oder? Nur die Handhabung scheint mir etwas komliziert.

SEpp55

Kurt - du hast eine PN ;-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Headerüberschrift mobile Ansicht viel u groß Theme Twenty Seventeen

Jetzt mitmachen!