スマホで見たときに画面が左右にブレてしまうときの対処法!

スマホで自分のブログを確認していると、上下にスライドする以外に、左右にブレてしまいスライドしにくいといったことがまれにあります…。

私のブログも、スマホで読んでみたときにめちゃくちゃ読みにくくて困りました。

グーグルで調べると…

CSSでスマホの横幅以上のサイズの何かを載せていることが原因なのかな…ということが何となく分かりましたが、CSSをいじることに抵抗があり(無知なので、なにか問題が起こるのが怖いので…)どこに記述して良いのかもわからず…。

どうしていいのか悩んでいると、カスタマイザーの「追加CSS」でとても簡単に直せる方法を見つけました!

こちらの記事を参考にさせていただきました!

もも

複雑なCSSが分からない私にとって、本当に助かる記事でした!

記事の内容

スマホ閲覧時、左右にブレるのを防ぐCSS!

外観 ≫ カスタマイズ ≫ 追加CSSでこちらのコードを記述します。

@media screen and (max-width : 767px){
 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }
}

スマホで画面がブレる方はぜひ試してみてください

ブログは、パソコンよりスマホでの閲覧が主流になってきているので、記事の内容以前に読みにくいブログだと離脱されてしまう可能性が高くなってしまいます。

パソコンでは正常に表示されていても、スマホで崩れてしまう場合も多々あるので、記事を書いたらパソコン画面と一緒にスマホ画面でも記事を確認するといいですよ^^

私はこのCSSコードを「追加CSS」に追加したことで瞬時に直りました!

同じようにスマホ画面で見たときに画面が左右にズレてしまうっていう方はぜひこのコードを試してみてください!

もも

以上で終わりです!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

こんにちは!近頃おうち時間を満喫しているももです^^ネットがあれば外出しなくても何でも出来るんだなぁと実感するこの頃。
このブログでは主に使っているテーマ(SWELL・アフィンガー6 )の事や、ブログに関する備忘録を書いています!

記事の内容