Support » Allgemeine Fragen » Einige Seiten werden auf handy nicht optimal dargestellt

  • Gelöst schecke

    (@schecke)


    Hallo,
    auf meiner Page gibt es drei Seiten, bei denen der Titel sehr lang ist und in der Handyansicht abgeschnitten wird (Beispiel bei Belegungskalender). Gibt es da Abhilfe?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Hallo @schecke
    das kannst du durch eine entsprechende Media Query ändern, z. B. wie folgt.
    Teste mal bitte unter Design > Customizer > Zusätzliches CSS:

    @media (max-width: 781px) {
      h1.entry-title {
          font-size: 1.5rem;
      }
    }

    Die Größe (1.5rem) kannst du ja noch entsprechend anpassen.
    Nachtrag: Schau aber bitte mal bei deinem Theme nach, ob du die Schriftgröße für Handy oder Tablets nicht schon in den Einstellungen vornehmen kannst. Das wäre natürlich in dem Fall besser.

    Viele Grüße
    Hans-Gerd

    Thread-Starter schecke

    (@schecke)

    Hallo Hans-Gerd,
    lieben Dank für deine Antwort. Leider hat sich dadurch nix verändert

    Wo hast du das denn eingetragen? Ich finde den Eintrag nicht.

    Allerdings gibt es bereits einen Eintrag

    @media all and (max-width: 767px) {
    h1 {
        font-size: 45px;
    }
    }

    Ggf. müsstest du dann in der CSS-Regel spezifischer werden, z.B.

    @media all and (max-width: 767px) {
    .page h1 {
        font-size: 1.5rem;
    }
    }
    Thread-Starter schecke

    (@schecke)

    Hab’s unter zusätzlichem css eingetragen.
    Komisch…

    Thread-Starter schecke

    (@schecke)

    Wo finde ich den Eintrag von dem du sprichst?

    Im Customizer? Das scheint nicht übernommen worden zu sein. Im Moment stehen da nur diese Einträge:

    
    body.category-dresses {
    background-image: url(“https://cas***yll.de/wp-content/uploads/2021/10/image-13-10-21-10-24-1.jpeg”);
    
    background-position: center center;
    
    background-size: cover;
    
    background-repeat: no-repeat;background-attachment: fixed;
    

    … und am Ende fehlt noch eine schließende Klammer }.
    Die typographischen Anführungszeichen um die URL des Hintergrundbilds sind auch verkehrt. Ersetz das mal durch normale Anführungszeichen.

    Den Eintrag siehst du, wenn du mit F12 die Entwickler-Tools deines Browsers öffnest und dir das CSS für den Titel anschaust.

    Thread-Starter schecke

    (@schecke)

    Wieso übernimmt er denn nicht?
    Bei mir steht es drin. Ich ging auf veröffentlichen u d bei mir steht es weiterhin drin, wenn ich Programm schließe und neu aufrufe. Ich verstehe es nicht…

    Deine Eingabe wurde übernommen, aber deine CSS-Regel ist weiterhin fehlerhaft.

    Statt

    
    body.category-dresses {
    
    background-image: url(“https://casparidyll.de/wp-content/uploads/2021/10/image-13-10-21-10-24-1.jpeg”);
    
    background-position: center center;
    
    background-size: cover;
    
    background-repeat: no-repeat;background-attachment: fixed;
    @media all and (max-width: 767px) {
    .page h1 {
        font-size: 1.5rem;
    }
    }

    muss es richtig lauten

    
    body.category-dresses {
    background-image: url("https://casparidyll.de/wp-content/uploads/2021/10/image-13-10-21-10-24-1.jpeg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    
    @media all and (max-width: 767px) {
    .page h1 {
        font-size: 1.5rem;
    }
    }

    Das hatte ich allerdings schonmal geschrieben. Vielleicht hast du das überlesen?

    Thread-Starter schecke

    (@schecke)

    Hm……. Bei zwei Seiten ist es jetzt optimal, bei der Seite „Belegungskalender“ hat sich jedoch nix verändert

    Wieso kopierst du nicht einfach den Code, den ich dir zur Verfügung gestellt habe?
    Es bringt auch wenig, wenn ich jetzt wiederhole, dass deine erste CSS-Regel fehlerhaft ist.

    Thread-Starter schecke

    (@schecke)

    Ich hab ihn doch kopiert.
    Und wie ich sagte, sind seitdem zwei Seiten gut, aber die Seite „Belegungskalender“ nach wie vor nichg

    Der Code, den du im Customizer unter Zusätzliches CSS eingetragen hast, ist für die Seite Belegungskalender weiterhin verkehrt (typographische Anführungsstriche „“ und fehlende schließende Klammer }). Wieso die Änderung im Customizer jetzt nur teilweise übernommen wird, kann ich nicht beurteilen. Hast du nach der Änderung den Cache deines Cache-Plugins geleert?

    • Diese Antwort wurde geändert vor 2 Jahren, 5 Monaten von Bego Mario Garde. Grund: Änderung, da die neue CSS-Regel teilweise übernommen wird
    Thread-Starter schecke

    (@schecke)

    Bego, ich hab’s genau so kopiert und er steht genau so drin

    Ja, Mißverständnis – mein Fehler. Offenbar ist das nicht für alle Seiten übernommen worden. Schau mal, was passiert, wenn du den Cache deines Cache-Plugins leerst.

    Thread-Starter schecke

    (@schecke)

    BINGO! das wars!
    VIEEEEEEEELEN DANK!

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Das Thema „Einige Seiten werden auf handy nicht optimal dargestellt“ ist für neue Antworten geschlossen.