Antworten auf deine Fragen:
Neues Thema erstellen

Horizontales Scrollen unterbinden

Waegi

Aktives Mitglied

Hallo,

Ich habe aktuell auf einer neuen Website das Problem, dass ich in der mobilen Version auf dem Handy horizontal scrollen kann, ich weiß jedoch nicht woher dieser Effekt kommt, ich hab schon mal alle Container versucht zu kontrollieren und zu sehen ob einer davon zu breit ist, das war jedoch nicht der Fall. Es bildet sich dann immer ein weißer Spalt am rechten Rand der Website, zu welchem dann gescrollt werden kann.

Die Website findet sich unter:

Vielen Dank schon für eure Hilfe.

Grüße Waegi
 

noltehans

Aktives Mitglied

Hi Waegi,

du hast width:1200px; UND max-width:1200px geschrieben.

<div id="layerslider_3" class="ls-wp-container" style="width:1200px;height:600px;max-width:1200px;margin:0 auto;padding:15px 0px;">
</div>
 

Waegi

Aktives Mitglied

Hallo, also wenn ich das ganze anpass auf auf width mit 100% und max-width:1200px, dann funktioniert das in der mobilen Version nicht mehr, der Slider wird dann nämlich viel zu hoch angezeigt und außerdem bleibt der weiße Rand immer noch stehen.

Trotzdem danke für die Antwort.
 

Aelfry

Web Developer

Ich habe aktuell auf einer neuen Website das Problem, dass ich in der mobilen Version auf dem Handy horizontal scrollen kann, ich weiß jedoch nicht woher dieser Effekt kommt,
Das liegt an zwei Objekten:
1) jedes h1 (.response) in deinen articles hat ein padding left/right, das zu der 100% Breite addiert wird
2) deine pagenavi (.wp-pagenavi) hat ebenfalls das padding Problem

Beides zusammen sorgt dafür, dass du mehr als 100% Breite und entsprechend eine horizontale Scrollbar hast.
 
K

kleinestigerle

Guest

Mit dem Befehl @media screen in einem css Stylesheet kannst du alle Parameter des Stylesheets für verschiedene Ansichtsgrößen/Ausgabemedien extra und detalliert definieren.
 

FloriBo

aka SikZ

Hallo.
Hatte vor kurzem ein identisches Problem und bin nach langer Suche über diese Lösung gestolpert: Diese Eigenschaften deinem wrapper zuweisen.

#wrapper {
width: auto;
height: auto;
overflow: hidden;
padding: 1px;​
}

Wobei ich es gerade auch ohne padding ausprobiert habe und das funzte auch. Musst du mal testen ob es mit oder ohne padding besser für dich ist, bzw. alles funktioniert.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben