サイト作成し、スマホで確認した際に、画面が左右に動いてしまうことがありました。
縦のスクロールだけでいいのに、横にスクロールできるような感じです。
そのままにしてもいい感じもしましたが、LPの作成だったので訪問してくれるユーザーが煩わしくてページから離れてしまうリスクがあると思い、原因追及しました。
考えられる原因
左右のpadding
考えられる原因として、セクションのpaddingを左右にしているケースがあるようです。
width:100% に paddingを左右に指定すると、padding分の余白が100％にプラスされてしまうとのことでした。
はみ出している要素
私が直した点はこちらで、
デベロッパーツールと、スマホで確認していると、縮小してみると出っ張っている要素があることに気づきました。
横にはみ出しているのがおわかりでしょうか。
これが、背景の区切りを使用したもので、width:55%になっていたため、ここが画面からはみ出しており、横にずれてしまっていたようです。
これを修正すると画面の揺れはなくなりました！
背景の区切りについては別のページで紹介しています。
コメント