Web

Horizontales Scrollen am Handy: Website seitlich verschiebbar, was tun?

Talha Aslan 17 Minuten Lesezeit 1 Aufrufe

Kurze Antwort

Horizontales Scrollen am Handy: Warum verschiebt sich die Website seitlich und was hilft?

Horizontales Scrollen am Handy entsteht, wenn mindestens ein Element breiter ist als der Bildschirm, sodass sich die ganze Seite seitlich verschieben lässt. Zur Behebung prüfen Sie zunächst das Viewport Meta Tag, dann suchen Sie das überstehende Element in den Entwicklertools und machen seine Breite flexibel.

Alle Details und Beispiele finden Sie weiter unten im Beitrag

Dieser Beitrag behandelt genau ein Problem: Ihre Website lässt sich auf dem Smartphone nach rechts wischen, rechts erscheint ein weißer Streifen, oder die Seite passt schlicht nicht auf den Bildschirm. Wir bei Talha Aslan und Team hören diese Beschwerde besonders oft nach einem Relaunch, nach einem Theme oder Pluginupdate und nachdem jemand eine Tabelle in einen Beitrag kopiert hat. Kurz gesagt steckt meist ein einzelnes Element dahinter. Mit der richtigen Methode finden Sie es oft in wenigen Minuten.

Ein Hinweis vorab: Darstellungsfehler, die nur in Safari auf dem iPhone auftreten, etwa vergrößerte Schrift oder Probleme an der Notch, sind ein eigenes Thema. Dazu lesen Sie unseren Beitrag, warum eine Website auf dem iPhone in Safari fehlerhaft aussieht. Hier geht es allein um den seitlichen Überlauf.

Wie erkennen Sie sicher, dass Ihre Seite seitlich überläuft?

Zunächst klären Sie, ob tatsächlich ein seitlicher Überlauf vorliegt. Denn manche Nutzer beschreiben auch eine vergrößert geladene Seite oder einen laufenden Bildslider als „die Seite rutscht nach rechts“. Deshalb prüfen Sie die Anzeichen einzeln.

  • Wenn Sie nach links wischen, gleitet der Inhalt mit, und rechts erscheint eine leere Fläche.
  • Gleich nach dem Laden wirkt die Seite verkleinert, und der Text ist kaum lesbar.
  • Kopfbereich oder Menü ragen über den rechten Rand, der Menüknopf fehlt.
  • Beim Scrollen nach unten wackelt die Seite leicht hin und her.
  • Nur eine bestimmte Seite ist betroffen, zum Beispiel ein Blogbeitrag oder eine Produktseite.

Der letzte Punkt ist besonders wertvoll. Ist nur ein Beitrag betroffen, steckt dahinter wahrscheinlich eine Tabelle, ein eingebettetes Video oder ein langer Link. Andererseits deutet ein Fehler auf allen Seiten auf Theme, Kopfzeile, Fußzeile oder eine gemeinsame Komponente hin. Somit halbiert diese einfache Unterscheidung Ihre Suche.

Was passiert, wenn das Viewport Meta Tag fehlt oder falsch ist?

Das Viewport Tag ist eine kurze Zeile im Kopfbereich der Seite. Sie weist den Browser an, die Seitenbreite an den Bildschirm anzupassen. Laut dem Leitfaden von Google auf web.dev stellen mobile Browser eine Seite ohne dieses Tag in Desktopbreite dar und verkleinern sie anschließend. Folglich wirkt die Seite herausgezoomt, und sobald der Nutzer hineinzoomt, beginnt horizontales Scrollen.

Die Details finden Sie im Artikel zu den Grundlagen des responsiven Webdesigns auf web.dev. Er empfiehlt, die Breite auf width=device-width und die Anfangsskalierung auf 1 zu setzen. Zudem warnt er, dass Einstellungen, die das Zoomen sperren, die Barrierefreiheit verschlechtern können.

Wie prüfen Sie das Tag also? Klicken Sie mit der rechten Maustaste auf die Seite, öffnen Sie den Quelltext und suchen Sie im Kopfbereich nach „viewport“. Fehlt das Tag oder steht dort ein fester Pixelwert, beheben Sie das zuerst. Außerdem fügen manche ältere Themes das Tag doppelt ein. Dann behalten Sie genau eine korrekte Zeile.

Noch ein Punkt: Eine Zoomsperre versteckt den Überlauf nicht. Sie hindert Nutzer lediglich daran, Inhalte zu vergrößern. Daher sollten Sie das Problem nie über eine Zoomsperre lösen.

Welche Ursachen haben horizontales Scrollen auf mobilen Geräten am häufigsten?

Aus unserer Praxis stammen die meisten Fälle aus derselben kurzen Liste. Die folgende Tabelle zeigt, woran Sie jede Ursache erkennen und was Sie zuerst versuchen.

UrsacheWoran Sie sie erkennenErster Lösungsschritt
Fehlendes oder falsches Viewport TagJede Seite lädt herausgezoomtEin einziges Tag auf Gerätebreite setzen
Box mit fester PixelbreiteEin Abschnitt ist breiter als der BildschirmMaximalbreite und Prozentwerte verwenden
Zu großes BildDer Bildrand liegt außerhalb des BildschirmsBilder auf 100 Prozent des Containers begrenzen
Breite TabelleNur Seiten mit Tabellen sind betroffenTabelle in einen eigenen Scrollcontainer legen
Eingebettetes Video, Karte oder IframeDer Video oder Kartenbereich ragt hinausEinbettung in einen flexiblen Rahmen setzen
Volle Viewportbreite (100vw)Der Überstand ist etwa so breit wie eine ScrollleisteStattdessen 100 Prozent Breite nutzen
Negativer AußenabstandEine Zeile oder ein Raster steht leicht überInnenabstand des Containers anpassen
Lange URL oder langes WortEine ungebrochene Textzeile läuft hinausUmbruch langer Wörter erlauben
Element außerhalb des BildschirmsEin geschlossenes Menü wartet rechtsSo verstecken, dass es keine Breite erzeugt

Die Reihenfolge ist bewusst gewählt. Zuerst stehen Ursachen, die alle Seiten betreffen, danach solche, die an einer einzelnen Seite hängen. Wenn Sie von oben nach unten vorgehen, sparen Sie also Zeit.

Wie finden Sie das überstehende Element mit den Chrome DevTools?

Die Chrome DevTools sind der schnellste Weg zur Ursache. Die Dokumentation zum Gerätemodus von Chrome erklärt, wie Sie mit der Gerätesymbolleiste einen mobilen Bildschirm simulieren. Gehen Sie dann Schritt für Schritt vor.

  1. Öffnen Sie die Seite im Desktop Chrome und starten Sie die DevTools.
  2. Aktivieren Sie die Gerätesymbolleiste und wählen Sie eine schmale Handybreite.
  3. Scrollen Sie langsam und achten Sie darauf, in welchem Abschnitt der weiße Streifen beginnt.
  4. Klicken Sie mit dem Auswahlwerkzeug die Boxen in diesem Abschnitt einzeln an.
  5. Prüfen Sie im Elements Bereich Breite und Boxmodell des gewählten Elements.
  6. Haben Sie das zu breite Element gefunden, kontrollieren Sie im Styles Bereich Breite, Außenabstand und Position.
  7. Ändern Sie den Wert probeweise und beobachten Sie, ob der Streifen verschwindet.

Der Vorteil dieser Methode: Sie testen Änderungen, ohne die Live Seite anzufassen. Allerdings sind Änderungen in den DevTools nicht dauerhaft; nach dem Neuladen sind sie weg. Deshalb übertragen Sie den passenden Wert anschließend in Ihre Themedateien oder in die Einstellungen Ihres Page Builders.

Die Chrome Dokumentation betont zudem, dass der Gerätemodus nur eine Annäherung erster Ordnung ist und kein echtes Smartphone ersetzt. Daher testen Sie jede Lösung zusätzlich auf einem echten Gerät.

Gibt es schnellere Wege, den Verursacher zu finden?

Ja, einige Kniffe beschleunigen die Suche deutlich. Der erste ist das Ausschlussverfahren. Im Elements Bereich blenden Sie die Hauptabschnitte nacheinander probeweise aus. Verschwindet der Streifen mit einem bestimmten Abschnitt, steckt der Verursacher darin. Danach wiederholen Sie denselben Schritt mit dessen Unterelementen.

Der zweite Kniff ist eine vorübergehende Umrandung aller Elemente. Sie fügen im Styles Bereich eine allgemeine Regel hinzu, die jeden Boxrand sichtbar macht. Somit fällt die Box, die über den rechten Rand ragt, sofort auf. Anschließend löschen Sie die Regel wieder, denn sie wirkt ohnehin nur in Ihrem Browser.

Der dritte Kniff nutzt die Badges im Elements Bereich. Chrome zeigt neben manchen Grid und Flexbox Containern kleine Badges an, die die Linien des Layouts auf den Bildschirm zeichnen. Sind zum Beispiel die Spalten eines Rasters breiter als der Bildschirm, machen diese Linien den Überlauf sofort sichtbar.

  • Ausschluss: Abschnitte einzeln ausblenden und den Bereich eingrenzen.
  • Umrandung: alle Boxränder sichtbar machen.
  • Rasterbadges: Spalten und Zeilenlinien auf dem Bildschirm sehen.
  • Schmaltest: auf die kleinste Handybreite verkleinern und notieren, ab wann der Überlauf beginnt.

Wie erzeugen Elemente mit fester Breite horizontales Scrollen?

Eine feste Breite bedeutet, dass eine Box eine exakte Breite in Pixeln erhält. Was am Desktop unauffällig ist, führt auf einem schmalen Handy direkt zum Überlauf. Auch der Leitfaden auf web.dev hält fest, dass Pixelmaße Nutzer auf kleinen Bildschirmen zum seitlichen Scrollen zwingen.

Typische Beispiele aus unserer Arbeit sind ein Formular mit fester Breite, ein Aktionsbanner, die Einstellung „Boxbreite“ eines Page Builders und der Hauptcontainer eines älteren Themes. Ein Angebotsformular, das für den Desktop gebaut ist, ragt zum Beispiel auf dem Handy über den Rand. Dieses eine Formular verschiebt dann die ganze Seite.

Die Lösung folgt einer einfachen Logik. Statt einer festen Breite verwenden Sie eine Maximalbreite und Prozentwerte. So behält die Box auf großen Bildschirmen ihr Maß und passt trotzdem auf kleine. Außerdem bieten die meisten Page Builder eine eigene Breiteneinstellung für die mobile Ansicht; diese prüfen Sie ebenfalls.

Gut gewählte Breakpoints verhindern das Problem von Anfang an. Mehr dazu lesen Sie in unserem Beitrag, wie Sie Breakpoints im responsiven Webdesign festlegen. Möchten Sie nicht selbst in Themedateien eingreifen, ist jetzt ein guter Zeitpunkt, die Website erstellen lassen zu prüfen. Das spart Zeit und senkt das Risiko, andere Seiten zu beschädigen.

Warum schieben große Bilder die Seite über den Rand?

Ein Bild läuft über, wenn es in seiner natürlichen Breite erscheint und diese breiter ist als der Bildschirm. Ein Titelbild mit mehreren tausend Pixeln Breite reicht zum Beispiel ohne Begrenzung weit über ein Handydisplay hinaus.

Der Leitfaden auf web.dev gibt dafür eine klare Regel: Geben Sie allen Bildern eine Maximalbreite von 100 Prozent. Damit bleibt das Bild in seinem Container, ohne über seine natürliche Größe hinaus zu wachsen. Zudem reservieren Breiten und Höhenangaben am Bild den Platz vorab, was Layoutverschiebungen reduziert.

Warum bleibt das Problem trotzdem, obwohl das Theme diese Regel bereits hat? Oft schreibt ein Plugin, eine Galerie oder ein Slider eine eigene feste Breite direkt an das Element. Dann greift die allgemeine Regel nicht. Deshalb prüfen Sie in den DevTools, welche Regel tatsächlich wirkt, und achten dabei auch auf durchgestrichene Regeln.

Hintergrundbilder sind ein eigener Fall. Ein Bild im Hintergrund eines Abschnitts verursacht selten selbst einen Überlauf. Allerdings passiert es, wenn der Abschnitt eine feste Breite hat. Anders gesagt liegt das Problem dann in der Box, nicht im Bild.

Wie verursachen breite Tabellen horizontales Scrollen und wie bändigen Sie sie?

Tabellen gehören zu den tückischsten Quellen für Überlauf. Ihre Zellen wachsen mit dem Inhalt, und die Tabelle ignoriert die Grenzen ihres Containers. Vergleichs und Preistabellen in Blogbeiträgen lösen das Problem besonders oft aus.

Das Ziel ist nicht, seitliches Scrollen völlig zu verhindern. Stattdessen sperren Sie es an der richtigen Stelle ein. Sie legen die Tabelle in einen eigenen Scrollcontainer, sodass nur die Tabelle seitlich scrollt und der Rest der Seite stehen bleibt. Somit bleibt die Tabelle lesbar, und die Seite verschiebt sich nicht mehr.

  • Legen Sie die Tabelle in einen eigenen Container und erlauben Sie seitliches Scrollen nur dort.
  • Reduzieren Sie die Spalten mobil oder wechseln Sie zu einer Kartenansicht.
  • Erlauben Sie langen Wörtern und Links in Zellen den Umbruch.
  • Zeigen Sie mit einem kleinen Hinweis, dass sich die Tabelle seitlich wischen lässt.

Die Gestaltungsmöglichkeiten haben wir im Beitrag über mobilfreundliche Tabellen gestalten verglichen. Hier geht es nur um den Überlauf.

Wie lösen eingebettete Videos, Karten und Iframes einen Überlauf aus?

Eingebettete Inhalte stammen von einer anderen Website und sitzen in einem Rahmen auf Ihrer Seite. Dazu zählen Videoplayer, Karten, Buchungswidgets und Beiträge aus sozialen Netzwerken. Fertige Einbettungscodes bringen häufig eine feste Breite und Höhe mit.

Ein Einbettungscode für ein Video enthält zum Beispiel meist eine Desktopbreite. Fügen Sie ihn unverändert ein, entsteht eine Box, die breiter ist als ein Handy. Deshalb setzen Sie die Einbettung in einen flexiblen Rahmen, begrenzen die Breite auf 100 Prozent und behalten das Seitenverhältnis bei.

Bei Widgets von Drittanbietern ist Ihr Einfluss begrenzt. Manche Buchungs oder Chatfenster arbeiten intern mit fester Breite. Prüfen Sie dann zunächst, ob der Anbieter eine responsive Einbettung anbietet. Fehlt sie, ist es am sichersten, das Widget nur innerhalb seines eigenen Containers scrollen zu lassen.

Einbettungen belasten außerdem die Ladezeit. Behalten Sie daher nur jene, die Sie wirklich brauchen. Weniger Einbettungen bedeuten weniger Risiko und schnelleres Laden.

Warum führt eine Breite von 100vw zu unerwartetem Überlauf?

100vw ist eine CSS Einheit und bedeutet „die volle Breite des Viewports“. Das klingt sicher. Allerdings schließt diese Breite in manchen Browsern die senkrechte Scrollleiste mit ein. Folglich ist das Element um die Breite der Scrollleiste breiter als der sichtbare Bereich, und die Seite rutscht ein paar Pixel zur Seite.

Dieser Überlauf ist meist klein, ein schmaler Streifen am rechten Rand. Wir sehen die Einheit oft in Abschnitten wie „Band in voller Breite“ oder „Hero im Vollbild“. Zudem wächst der Überstand, wenn solche Abschnitte zusätzlich seitliche Außenabstände haben.

In den meisten Fällen ist die Lösung einfach. Sie definieren die Breite als 100 Prozent des Containers statt als Viewporteinheit. So ignoriert das Element die Scrollleiste und füllt genau den sichtbaren Bereich. Soll ein Abschnitt bewusst von Rand zu Rand reichen, lösen Sie das über die Layoutstruktur und nicht über Außenabstände.

Hinweis: Das Verhalten unterscheidet sich je nach Browser und Betriebssystem. Auf Smartphones liegt die Scrollleiste oft über dem Inhalt. Daher zeigt sich das Problem manchmal nur im Desktoptest. Sauberer Code ist trotzdem auf beiden Seiten die sichere Wahl.

Wie verursachen negative Außenabstände und Raster einen Überlauf?

Ein negativer Außenabstand zieht eine Box aus ihrer Position nach außen. Viele Rastersysteme geben Zeilen einen negativen Außenabstand, um die Abstände zwischen Spalten auszugleichen. Passt der Innenabstand des Containers nicht dazu, ragt die Zeile über den rechten Bildschirmrand.

Ziehen Sie zum Beispiel in einem Page Builder einen Zeilenblock aus seinem Containerblock heraus, fällt der ausgleichende Innenabstand weg. Dann entsteht rechts ein schmaler, aber hartnäckiger Streifen. Deshalb prüfen Sie bei Rastern immer, ob jede Zeile im richtigen Container sitzt.

Ähnliches passiert bei Animationen. Manche Einblendeffekte platzieren ein Element zunächst rechts außerhalb des Bildschirms und schieben es beim Scrollen herein. Vor dem Start der Animation liegt dieses Element außerhalb und verbreitert die Seite. Somit erscheint der Überlauf eventuell nur beim ersten Laden oder an einer bestimmten Scrollposition.

  • Stellen Sie sicher, dass Zeilenblöcke im richtigen Container liegen.
  • Nutzen Sie negative Außenabstände nur mit passendem Innenabstand.
  • Prüfen Sie die Startposition von Animationen, die von rechts kommen.
  • Sehen Sie nach, wie das geschlossene Handymenü außerhalb des Bildschirms wartet.

Wie verbreitern lange URLs und ungetrennte Wörter die Seite?

Browser brechen Text normalerweise an Leerzeichen um. Eine sehr lange Zeichenkette ohne Leerzeichen bleibt dagegen in einer Zeile, etwa eine lange URL, eine E-Mail Adresse oder ein langer Produktcode. Ist diese Zeile breiter als der Bildschirm, verbreitert sie ihren Container und damit die Seite.

Am häufigsten sehen wir das in Blogbeiträgen, Kommentarbereichen und Quellenlisten. Vor allem eine nackte URL als Linktext macht den Überlauf fast sicher. Gerade im Deutschen kommen zudem lange zusammengesetzte Wörter hinzu, die in schmalen Spalten dasselbe Problem auslösen.

Die Lösung hat zwei Ebenen. Zunächst verwenden Sie auf der Inhaltsseite einen sprechenden Linktext statt einer nackten URL; das verbessert Lesbarkeit und Barrierefreiheit. Dann ergänzen Sie im Theme eine Textregel, die langen Wörtern bei Bedarf den Umbruch am Zeilenende erlaubt. So läuft die Seite nicht über, selbst wenn im Redaktionsalltag ein Fehler passiert.

Besonders wichtig ist diese Regel in Tabellenzellen und schmalen Seitenleisten. Denn dort reicht schon ein kurzer Code für einen Überlauf.

Ist das Ausblenden des Überlaufs eine echte Lösung?

Nein, meist ist es nur ein Notbehelf. Blenden Sie den seitlichen Überlauf am äußersten Container aus, wird der Streifen unsichtbar. Das überstehende Element ist aber weiterhin breiter als der Bildschirm; der Browser schneidet es lediglich ab.

Dieser Ansatz hat konkrete Nebenwirkungen. Zum Beispiel verschwinden der rechte Teil eines Formulars, ein Button oder ein Preis. Außerdem funktionieren klebende Kopfzeilen manchmal nicht mehr, wenn der äußere Container den Überlauf versteckt. Zudem verhält sich das Ausblenden in manchen Browsern, auch in Safari auf dem iPhone, nicht immer so einheitlich wie erwartet.

Wann ist es also vertretbar? Ist das überstehende Element rein dekorativ, etwa eine Hintergrundform, dürfen Sie den Überlauf in genau diesem Abschnitt ausblenden. Anders gesagt wenden Sie es auf den betroffenen Abschnitt an, nicht auf die ganze Seite.

Zusammengefasst finden Sie zuerst die echte Ursache. Das Ausblenden nutzen Sie dann nur bewusst und im kleinstmöglichen Bereich.

Schadet horizontales Scrollen am Handy der SEO und der Nutzererfahrung?

Treffender ist es, darin ein Problem der Nutzererfahrung zu sehen und keine direkte Rankingstrafe. Der Leitfaden auf web.dev stellt fest, dass Nutzer senkrechtes Scrollen erwarten. Seitliches Scrollen oder Herauszoomen zu erzwingen, sorgt demnach für eine schlechte Erfahrung.

Diese Erfahrung hat praktische Folgen. Nutzer zoomen ständig, um Text zu lesen, erreichen das Menü nicht oder übersehen den Absendeknopf eines Formulars. Folglich verlassen Besucher die Seite eher, und Anfragen gehen verloren.

Für die SEO gilt: Google nutzt beim Mobile First Indexing die mobile Version einer Seite. Somit spielen Fehler in der mobilen Darstellung bei der Bewertung Ihrer Website eine wichtige Rolle. Unterschiede zwischen den Geräten behandeln wir im Beitrag über mobile SEO Fehler, die nur am Handy auftreten.

Ein Hinweis: Wir versprechen nicht, dass eine Korrektur Rankings garantiert. Die Behebung macht die Seite angenehm nutzbar; das Ranking hängt dagegen von vielen Faktoren ab.

Welche Tests sollten Sie nach der Korrektur durchführen?

Erst ein Test nach der Korrektur zeigt, ob das Problem wirklich gelöst ist. Denn die Behebung eines Elements kann einen zweiten Überlauf auf derselben Seite sichtbar machen. Deshalb testen Sie nicht nur eine Breite, sondern mehrere.

  1. Ziehen Sie in den DevTools die Breite langsam von der schmalsten Handybreite bis zur Tabletbreite auf und achten Sie darauf, dass der Streifen nie erscheint.
  2. Drehen Sie das Handy ins Querformat und prüfen Sie dieselbe Seite.
  3. Öffnen und schließen Sie Menü, Popups und Cookiebanner.
  4. Testen Sie eine Beispielseite mit langer Tabelle, langem Link und eingebettetem Video.
  5. Machen Sie die Endkontrolle auf einem echten Android Gerät und einem echten iPhone.
  6. Nutzen Sie ein Cache Plugin, leeren Sie den Cache und testen Sie erneut.

Für einen schnellen Überblick eignet sich unser Tool zum Test der Mobilfreundlichkeit. Eine ausführlichere Methode beschreibt unser Leitfaden, wie Sie die Mobilfreundlichkeit testen.

Wie sieht eine Checkliste gegen horizontales Scrollen aus?

Mit der folgenden Liste suchen Sie jedes Mal in derselben Reihenfolge. So prüfen Sie keine Stelle doppelt und übersehen keine Ursache.

  • Gibt es genau ein Viewport Tag, gesetzt auf die Gerätebreite?
  • Betrifft der Fehler alle Seiten oder nur eine?
  • Gibt es eine Box, ein Formular oder ein Banner mit fester Pixelbreite?
  • Sind alle Bilder auf die Containerbreite begrenzt?
  • Liegen Tabellen in einem eigenen Scrollcontainer?
  • Stecken Videos, Karten und Iframes in einem flexiblen Rahmen?
  • Nutzt ein Abschnitt die volle Viewportbreite als Einheit?
  • Sitzen Rasterzeilen im richtigen Container, mit ausgeglichenem Außenabstand?
  • Dürfen lange URLs und Wörter umbrechen?
  • Erzeugen geschlossene Menüs oder Animationen Breite außerhalb des Bildschirms?

Die Liste hilft auch bei neuen Inhalten. Fügen Sie zum Beispiel eine Tabelle oder ein Video in einen Beitrag ein, prüfen Sie die letzten Punkte. Dann fangen Sie den Fehler vor der Veröffentlichung ab.

Was tun, wenn das Problem nach einem Plugin oder Themeupdate begann?

Begann der Überlauf direkt nach einem Update, ist das Geänderte der wahrscheinliche Verursacher. Zunächst bestimmen Sie also, wann genau das Problem auftrat. Danach listen Sie Theme, Plugins und Page Builder Teile auf, die sich an diesem Tag geändert haben.

Am sichersten arbeiten Sie in einer Stagingkopie statt auf der Live Seite. Dort deaktivieren Sie Plugins einzeln und beobachten, ob der Streifen verschwindet. So bekommen Ihre Besucher vom Ausprobieren nichts mit.

Außerdem kann ein Themeupdate Ihre eigenen CSS Anpassungen überschrieben haben. Korrekturen direkt in den Dateien des Haupttheme gehen bei Updates verloren. Deshalb legen Sie dauerhafte Korrekturen an einer Stelle ab, die Updates nicht berühren, etwa in einem Child Theme oder im Bereich für zusätzliches CSS.

Hier spielt auch die Frage nach dem Eigentum an Code und Design hinein. Arbeiten Sie mit einem Entwickler, sollten Sie wissen, ob Änderungen in einem Repository liegen, auf das Sie Zugriff haben. Mehr dazu lesen Sie im Beitrag, wem der Quellcode der Website gehört.

Beeinflussen Schriften und externe Ressourcen den Überlauf?

Indirekt ja. Bis eine Webschrift geladen ist, nutzt der Browser eine Ersatzschrift. Ist diese breiter, können Überschriften und Menüpunkte kurz überlaufen und sich erst mit der echten Schrift beruhigen. Daher zeigt sich der Überlauf manchmal nur bei langsamer Verbindung und nur beim ersten Laden.

Außerdem kann eine etwas breitere Schrift eine Reihe von Menüpunkten über den Rand schieben. Das passiert vor allem bei langen Menübezeichnungen. Prüfen Sie deshalb genau, ab welcher Breite Ihr mobiles Menü tatsächlich greift.

Schriften lokal einzubinden betrifft sowohl diese Konsistenz als auch den Datenschutz. Die rechtliche und technische Seite erklären wir im Beitrag, wie Sie Google Fonts DSGVO konform lokal einbinden. Hier erwähnen wir nur die Wirkung auf den Überlauf.

Kurz gesagt achten Sie bei der Suche nicht nur auf Layoutregeln, sondern auch auf die Ladereihenfolge. Drosseln Sie in den DevTools die Netzwerkgeschwindigkeit und laden Sie neu, dann zeigen sich solche kurzen Überläufe.

Wann beheben Sie das selbst und wann übernimmt ein Profi?

Ist das überstehende Element ein Bild, eine Tabelle oder ein Video, lösen Sie das oft selbst im Seiteneditor. Eine Tabelle in einen Scrollcontainer zu legen oder ein Video mit responsiver Einbettung neu einzufügen, erfordert zum Beispiel keine Programmierkenntnisse.

Andererseits ändert sich die Lage, wenn das Problem im Kern des Themes, im Rastersystem oder im Zusammenspiel mehrerer Komponenten liegt. Dann kann eine Korrektur eine andere Seite beschädigen. Zudem braucht eine updatesichere Lösung Child Theme, Versionsverwaltung und eine Stagingkopie.

Wir bei Talha Aslan und Team benennen in solchen Fällen zuerst das überstehende Element und bereiten dann die dauerhafte Korrektur in einer Testumgebung vor. Wünschen Sie ein von Grund auf stabiles mobiles Layout oder kehrt horizontales Scrollen immer wieder zurück, lohnt sich ein Blick auf unser professionelles Webdesign. So bleibt das Problem auch nach dem nächsten Update gelöst.

Häufig gestellte Fragen

Sieht horizontales Scrollen auf jedem Handy gleich aus?
Nein, das Bild kann sich je nach Gerät unterscheiden. Der Überlauf hängt von der Bildschirmbreite ab, daher fällt er auf schmalen Handys deutlich auf und auf breiten eventuell gar nicht. Zudem stellen Browser Scrollleisten unterschiedlich dar. Deshalb beginnen Sie den Test bei der schmalsten Breite und vergrößern dann, bis der Überlauf verschwindet.
Der weiße Streifen zeigt sich nur auf einer Seite. Wo fange ich an?
Beginnen Sie mit dem Inhalt genau dieser Seite. Ein Überlauf auf einer einzelnen Seite stammt meist von einer Tabelle, einem eingebetteten Video, einem großen Bild oder einem langen Link. Blenden Sie in den DevTools die Abschnitte einzeln aus und sehen Sie, mit welchem der Streifen verschwindet. So lösen Sie das Problem gezielt, ohne das Theme anzufassen.
Hilft es, das Zoomen zu sperren?
Nein, das hilft nicht. Eine Zoomsperre macht das überstehende Element nicht schmaler, sie hindert Nutzer nur am Vergrößern. Der Leitfaden auf web.dev warnt außerdem, dass solche Einstellungen die Barrierefreiheit verschlechtern können. Richtig ist es, das Viewport Tag auf Gerätebreite zu setzen und dann das zu breite Element flexibel zu machen.
Kann ich den Überlauf im Page Builder ohne Code beheben?
In den meisten Fällen ja. Page Builder bieten meist eigene Einstellungen für Breite, Abstände und Sichtbarkeit in der mobilen Ansicht. Haben Sie den überstehenden Block gefunden, entfernen Sie dort die feste Breite und setzen negative Außenabstände zurück. Liegt das Problem allerdings im Kern des Themes, brauchen Sie für eine sichere Lösung eine Stagingkopie und ein Child Theme.
Ich habe den Fehler behoben, sehe ihn am Handy aber noch. Warum?
Meist liegt das am Cache oder an einem zweiten überstehenden Element. Leeren Sie den Cache Ihres Plugins und des Browsers und laden Sie die Seite neu. Bleibt der Fehler, wiederholen Sie die Suche in den DevTools, denn die Korrektur eines Elements kann einen weiteren Überlauf sichtbar machen. Die Endkontrolle machen Sie immer auf einem echten Handy.
  • Mobilfreundlichkeit
  • horizontales Scrollen
  • responsives Webdesign
  • Viewport
  • Chrome DevTools
  • Webdesign
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Angebot für Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Wir melden uns am selben Tag und senden Umfang, Zeitplan und Preis innerhalb von 1 Werktag als schriftliches Angebot.