Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 10 von 10
  1. #1
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104

    responsive Darstellungsproblem Samsung S7

    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. #2
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    265
    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. #3
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    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. #4
    PostRank: 10 Avatar von SirEctor
    Registriert seit
    28.10.2008
    Beiträge
    9.912
    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.
    Das Geheimnis des Könnens liegt im Wollen!

  5. #5
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    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. #6
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    Zitat Zitat von SirEctor Beitrag anzeigen
    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.
    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.
    Geändert von Morten12 (04.02.2018 um 15:25 Uhr)

  7. #7
    PostRank: 10 Avatar von SirEctor
    Registriert seit
    28.10.2008
    Beiträge
    9.912
    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:
    #kommentare li.comment a {
        word-wrap: break-word;
    }
    Könnte sein, dass es ein ähnliches Problem auf den anderen Seiten ist.
    Das Geheimnis des Könnens liegt im Wollen!

  8. #8
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    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. #9
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    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. #10
    PostRank: 3
    Registriert seit
    20.04.2014
    Beiträge
    104
    Eine mögliche Ursache könnte folgender Code aus den Zeilen 1063 und 2015 sein:
    Code:
    .nav-footer {...
            margin-right: 20px;}

    Code:
    .nav-footer {...
            width:100%;
            margin-right: auto !important;
            }

    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?

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •