1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

mobile Ansicht - Überschriften überlappen

Dieses Thema im Forum "Design" wurde erstellt von newbie123, 8. Juni 2020.

Schlagworte:
  1. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    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".

    www.diebusinesscoach.at

    Hat wer Tipps?
     
    #1 newbie123, 8. Juni 2020
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Im Customizer in die Zusätzlichen CSS einfügen -

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    - 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
     
    #2 SEpp55, 8. Juni 2020
    Zuletzt bearbeitet: 8. Juni 2020
    newbie123 gefällt das.
  3. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    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.
     
    #3 newbie123, 8. Juni 2020
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    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!
    ;)

     
    #4 SEpp55, 8. Juni 2020
    Zuletzt bearbeitet: 8. Juni 2020
    newbie123 gefällt das.
  5. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    es ist im "zusätzlichen CSS"
     
    #5 newbie123, 8. Juni 2020
  6. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    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:

    upload_2020-6-8_15-27-14.png
     
    #6 SEpp55, 8. Juni 2020
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    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!
     
    #7 SEpp55, 8. Juni 2020
    newbie123 gefällt das.
  8. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    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.
     
    #8 newbie123, 8. Juni 2020
  9. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    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?
     
    #9 newbie123, 8. Juni 2020
  10. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Bei mir wird alles geteilt (Win10 Rechner - Firefox)

    upload_2020-6-8_16-20-21.png
     
    #10 SEpp55, 8. Juni 2020
    newbie123 gefällt das.
  11. newbie123

    newbie123 Member

    Registriert seit:
    6. Juni 2020
    Beiträge:
    7
    Zustimmungen:
    0
    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 ;))
     
    #11 newbie123, 8. Juni 2020
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    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 &shy; = Soft Hyphen 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 ;)
     
    #12 SEpp55, 8. Juni 2020
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden