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

responsive Darstellungsproblem Samsung S7

Dieses Thema im Forum "Design" wurde erstellt von Morten12, 18. Januar 2018.

  1. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Liebe WP-Freunde,

    ich habe ein Problem mit dem Layout meines Blog mortenundrochssare.de in der Responsive-Ansicht. Auf dem Samsung S7 passt sich das Responsive-Layout nicht der Bildschirmgröße an. Das Layout ist etwas zu groß, weshalb es sich für wenige Millimeter nach links und rechts verschieben lässt. Durch diese Links-Rechts-Bewegung wird das Hoch-Runter-Scrollen stark beeinträchtigt. Ich kann mir nicht erklären, warum das Responsive-Layout im S7 nicht zur Bildschirmgröße passt (zumal das Problem erst seit einiger Zeit auftritt und nicht schon von vornherein bestand) Auf anderen Smartphones, etwa Lenovo, passt sich das Responsive-layout problemlos dem Bildschirm an.
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Stimmt... macht mein Galaxy auch!
    Nur ein Verdacht... es könnte an der Überschrift 'Lateinamerika' im Footer liegen. Das Wort ist zu lang für den Container, in dem es enthalten ist und ragt somit in den Nachbarcontainer (Asien).
    Einfach mal testen und in das Wort einen Bindestrich (Latein-amerika) einbauen, damit dort ein Zeilenumbruch entsteht!
    Sollte dann das horizontale Scrollen weg sein, dann ist die Ursache gefunden. Ansonsten ... weiter suchen.
     
  3. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Tatsächlich war die Ursache des Problems ein minimales Zoom-In, das nicht bemerkt wurde. Aber die Sache mit der zu langen Überschrift schaue ich mir an. Danke für den Hinweis!
     
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    420
    Ich vermute es liegt an Elementen wie #liste-1. Das bekommt bis max 768px eine width von 90% plus zusätzlich 20px margin rechts und links. Bei Geräten unter 400px kommt man damit rechnerisch auf über 100%

    399px x 90% = 359.1px
    359.1px + (2 x 20px) = 399.1px

    Bei kleineren Geräten wird die Differenz immer größer.

    Ganz schlimm wird es für id=copy-mobil. Das bekommt eine width von 100% plus 20px margin-left. Und das für Geräte bis 480px.

    Ich weiß nicht was du noch alles an Spezialitäten im Theme hast.
     
  5. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Vielen Dank für den sehr hilfreichen Hinweis. Ich habe den Margin links und rechts mit 5% definiert. Nun sollte es passen. Ich hoffe damit ist das ursprüngliche Problem gelöst.
     
  6. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Das Problem für id=copy-mobil ist erledigt. Ich habe mir deinen Hinweis zu Herzen genommen und die Größenangeben noch einmal überprüft. Dabei habe ich noch zwei weitere "Übergrößen" gefunden. Jetzt sieht zumindest die Startseite vernünftig aus. Allerdings habe ich das gleiche Problem noch auf den einzelnen Beitragsseiten und auf der Über Uns-Seite. Nur finde ich hier mal wieder das Problem nicht. Vielleicht sollte ich noch mal einen neuen Thread dafür eröffnen.

    Dennoch möchte ich noch einmal Danke sagen für deinen wichtigen Hinweis.
     
    #6 Morten12, 4. Februar 2018
    Zuletzt bearbeitet: 4. Februar 2018
  7. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    420
    Bei "Über uns" ist es der Kommentar vom 25. Dezember 2016. Der beinhaltet einen Link, der sehr lang und ohne Trennzeichen ist. Abhilfe könnte folgendes schaffen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Könnte sein, dass es ein ähnliches Problem auf den anderen Seiten ist.
     
  8. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Vielen Dank. Leider hat der Code nicht funktioniert. Aber dein Hinweis war trotzdem Gold wert. Ich habe den Link herausgenommen und im Kommentar stattdessen ein Wort mit der URL verlinkt. Work-around nennt man das wohl ;)
     
  9. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Jetzt sieht die Über uns Seite schon besser aus...allerdings ist sie, ebenso wie die single-post-Seite etwas zu groß für den Display. Irgendwo hakt es noch und ich bin nicht in der Lage den Fehler zu finden. Ich freue mich über jeden weiteren Hinweis und Ratschlag.
     
  10. Morten12

    Morten12 Well-Known Member

    Registriert seit:
    20. April 2014
    Beiträge:
    125
    Zustimmungen:
    0
    Eine mögliche Ursache könnte folgender Code aus den Zeilen 1063 und 2015 sein:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Im zweiten Code-Beispiel (@media
    screen and (max-width: 480px)) habe ich bei einer Breite von 100% den rechten Margin aufheben wollen. Im Chrome-Browser wird dies aber nicht übernommen. Margin-right bleibt mit 20 px bestehen und ist damit größer fließt der Inhalt über die Displaygröße hinaus.
    Ich verstehe nicht, warum Chrome die Aufhebung des Margins nicht anerkennt. Hat Jemand eine Idee?
     
  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.
    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.
    Information ausblenden