スマホでサイトを確認した時、
画像サイズや余白(マージンやパディング)も問題ないのに、左右に横揺れすることがあります。
めっちゃ気になりますよね!
画面をピンチアウトしたり小さくしたりすると、なぜか揺れはおさまる。
今回は、この横揺れの修正方法をお伝えします。
以下の一行をbodyやwrapなどに適応させるだけ。
overflow-x: hidden
これだけだと、どこに入れるのか、わからないですよね。
コピペでできるソースはこちら!
スマホ対応で、htmlとbodyタグへ適応させたCSSが以下です。
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
}
}