mobile Ansicht - Überschriften überlappen

    Hallo!

    ich benutze ein Child-Theme des Themes Sydney.

    Nachdem ich meine ganze HP aufgebaut habe, musste ich jetzt leider feststellen, dass die Überschriften meines Blogs in der mobilen Ansicht

    1) nicht abgetrennt werden, was zur Folge hat, dass sie über den Seitenrand gehen.
    2) sich in der Übersichtsansicht sogar überlappen.
    3) ich zwar die Überschriftgröße der einzelnen Beiträge verändern kann, nicht aber
    4) die Größe der Überschriften in der Übersichtsseite (also dort, wo man die Blogbeiträge alle aufgelistet bekommt)

    zusätzlich überlappen sich die Überschriften am Ende eines Beitrages bei "zum nächsten Beitrag" bzw. "zum letzten Beitrag".

    http://www.diebusinesscoach.at

    Hat wer Tipps?

    • 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 Customizer in die Zusätzlichen CSS einfügen -

    Code
    .hentry .title-post {
    font-size: 30px;
    hyphens: auto;
}

    - und auf unerwünschte Nebeneffekte prüfen ;)

    font-size auf die gewünschte Schritgröße anpassen ( war auf 36px)
    hypens ist ggf auch mit anderen Optionen möglich - oder mit word-wrap

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    3 Mal editiert, zuletzt von SEpp55 (8. Juni 2020 um 13:26)

    Danke Sepp für deine Antwort.

    Leider ergab es absolut keine Veränderung.
    Ich habe auch schon andere CSS Codes versucht - ohne jede Auswirkung.

    Ich stelle aber auch fest, dass Du siehst, dass meine Überschriften 36px groß sind. Das Theme lässt mich Überschriftengrößen in den einzelnen Beiträgen verändern aber nicht in der Blogübersicht.

    Zitat von newbie123

    aber nicht in der Blogübersicht.

    Deswegen soll das ja im Customizer in die Zusätzlichen CSS, die werden zuletzt geladen und überschreiben die "normalen" CSS Regeln.
    Bitte kopiere das nochmals in die Zusätzlichen CSS (custom css)! oder in das style.css des Sydney-Child-Themes - ich sehe das derzeit nicht!
    ;)

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Einmal editiert, zuletzt von SEpp55 (8. Juni 2020 um 15:19)

    Ich habe ein kleines Video gemacht - ohne Ton - aber dort wird der Code in die style.css des Child-Themes versucht - und siehe da....
    Lt Quellcode ist in den Zusätzlichen CSS folgendes:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Eine grundsätzliche Frage, wofür hast du ein Child-Theme von Sydney?

    ..... aaaah in dem Video ist auch noch eingebaut, dass diese Anpassungen erst wirken, wenn die Anzeige-Breite des Browsers <= 768px ist, darüber bleibt es wie gehabt!

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    ich bin ganz faszniert, was du alles kannst! ;)

    geh bitte zum nächsten Blogbeitrag "welche Farben in Bewerbungsunterlagen" ... oder den nächsten "Bewerbungsgespräche ..." trotz Code wird es nicht getrennt - zumindest bei mir am Iphone nicht und auch in der Vorschau auf Wordpress nicht.

    Auch Google kritiesiert (Search Console), dass sich die Überschriften überlappen. ich verstehe also nicht, warum es bei dir (im Video) ersichtlich funktioniert - bei mir aber nicht.

    warum ich ein Child Theme verwende: beim Versuch die "powered by Wordpress - Theme Sydney" zu ändern, hab ich festgestellt, dass sich das nur über ein Child Theme verändern lässt.

    Zitat von SEpp55

    Eine grundsätzliche Frage, wofür hast du ein Child-Theme von Sydney?

    ..... aaaah in dem Video ist auch noch eingebaut, dass diese Anpassungen erst wirken, wenn die Anzeige-Breite des Browsers <= 768px ist, darüber bleibt es wie gehabt!

    das könnte die Lösung sein (fällt mir jetzt grade auf). Wie kann ich das Kommando geben, dass es auch schon davor abgetrennt wird?

    Bei mir wird alles geteilt (Win10 Rechner - Firefox)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    sehr, sehr interessant und danke!

    Du hast mich gerade tief blicken lassen!


    bei mir auf Win 10 - Google Chrome - wird nicht abgrennt.
    bei Win 10 Edge wird nicht abgetrennt.

    am Iphone Safari wird nicht abgetrennt.
    am Iphone Chrome besteht das Problem interessanter Weise nur am Ende jedes Beitrags - dort kann man zum -vorherigen Beitrag oder zum nächsten - dort überlappen sich die Überschriften nach wie vor.

    Hast Du dafür auch noch eine Lösung?

    (wenn man auf "Seite untersuchen" geht werden auch noch diverse andere Fehler angezeigt. ich mach jetzt besser einen html Kurs ;))

    Als eine Möglichkeit der "unkontrollierten Worttrennung" wäre noch word-break: break-all; damit wird bei Platzmangel ein Umbruch erzeugt und eine neue Zeile begonnen ....

    Offensichtlich unterstützt Chrome das hypens "noch immer" oder schon wieder NICHT! So genau kann ich das nicht sagen - vielleicht kann ein anderer etwas Licht ins Dunkel bringen.
    Da auch der neue Edge ein Chrom mit anderer Flagge ist ...... und Safari kenne ich nur vom hören/sagen.

    Dann kannst du noch den "bedingten Trennstrich" versuchen! (auch unter[size=14] &shy; = Soft Hyphen[/SIZE] zu finden).
    Zum Testen den Cursor im Bearbeitungsmodus auf eine Solltrennstelle sezten und ALT+0173 drücken - das birngt das &shy;
    :(:mad::eek::rolleyes:
    Die schönere Variante, wenn man einmal geschnallt hat, wie es klappt ;)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden