Layout iim Responsive-Design verschieden angezeigt

  • Hallo WP-Freunde,

    Ich betreibe einen Blog mit einem selbstgeschriebenen Template. Es sieht so aus als ob die Leser meines Blogs Probleme beim Lesen der Artikel haben, wenn sie den Blog mit ihren Smartphones aufrufen. Zwei verschiedene Text-Divs, die im Blog eigentlich nebeneinander liegen, überlappen sich und auch das Hauptmenü ist weit auseinanderezogen. Wenn ich jedoch über das Entwicklertool im Browser (Chrome, Firefox) den Blog im Responsivedesign anschaue, sieht der Blog auch in der Auflösung kleiner Bildschirme vernünftig aus (wie übrigens auch in jeder anderen Auflösung). Auch auf meinem eigenen Smartphone habe ich keine Problem mit der Darstellung.


    Jetzt weiß ich leider nicht wo ich ansetzten soll, um das Problem zu lösen.
    Ich füge drei Screen Shots als Anhang bei. Die ersten beiden Screen Shoots zeigen die fehlerhafte Darstellung des Blogs auf einem Smartphone. Der dritte Screen Shot zeigt den Blog im Responsive-Design über des Entwicklertool von Firefox (width 280).


    Falls jemand eine Idee hat, bin ich über jeden Ratschlag dankbar.

    Vielen Dank und Liebe Grüße
    Morten

    • 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

  • ich habe gerade mal mit dem Smartphone (Chrome) drauf geschaut, sieht normal aus, keine Fehler.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Schau mal im Safari-Browser, dann siehst du ganz schnell was los ist.

    Versuch mal deine Media-Queries so zu schreiben:
    Media screen and (max-width:...px){....}

    Du kannst anstatt screen auch all schreiben. Du hast nur Media (max-width:...px){....} geschrieben.

    Außerdem schau mal ob du evtl. irgendwo eine } vergessen hast.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • hey, vielen Dank für den Hinweis. Ich probiere es sofort aus! Wäre schön, wenn du noch mal schauen könntest, ob das Layout nun vernünftig aussieht.

    Einmal editiert, zuletzt von Morten12 (6. September 2017 um 13:44)

  • Keine Besserung in Sicht.

    Außerdem schau mal ob du evtl. irgendwo eine } vergessen hast.


    Schau mal ob du irgendwo eine { oder } zu viel oder zu wenig hast.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ich habe auch die Klammern überprüft, aber keinen Fehler finden können. Hast du vielleicht noch eine Idee, wie das Problem zu lösen sein könnte?

  • Nun habe ich herausgefunden, dass die fehlerhafte Darstellung im Safari-Browser auftaucht. Gibt es besondere Einstellung für Safari, die ich beachten muss, damit mein Blog vernünftig angezeigt wird?

  • Ich erwähnte sowas bereits .... ;-)

    Schau mal im Safari-Browser, dann siehst du ganz schnell was los ist.


    Hilfe ohne in die Materie einzusteigen, finde ich an dieser Stelle schwierig. Vielleicht findet sich jemand in der Jobbörse, der das für kleines Geld erledigt.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

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