このブログははてなブログ、レスポンシブデザインを使っています。
この前、カスタマイズしていたところ、スマホで見たときに、右側に謎の余白が発生していました。
↓ スマホで見た画面。
この余白によって、左右にほんの少しスクロールが生じ、画面がブレる現象が起きた。
まぁ別に良いんだけど・・・無意味な余白のせいで横ブレするのなんか気に入らない！
というわけで、CSSにコチラを追加しました。
@media only screen and (max-width: 750px) {
body{overflow-x:hidden;}
html{overflow-x:hidden;}
}
少し、説明をすると
@media only screen and (max-width: 750px) {
このブログはレスポンシブデザインを使っていますが、上記の記述で、 画面幅が750px未満の媒体（つまりスマホ）で見た時に中身が発動するようにします。
body{overflow-x:hidden;}
html{overflow-x:hidden;}
overflow-x:hidden っで、x軸方向（横方向）にはみ出した部分を隠します。
結果
横ブレしなくなった。
ちなみに、はみ出した部分はすべて隠れてしまうので、もし、必要な要素（本文とか、画像とか、広告とか）がはみ出して横ブレしているのが原因の場合は、その要素はカットされると思われます。
右の余白部分に本文等が何もはみ出していないことを確認してから行ったほうが良いと思います。
ちなみに、参考画面の記事はコチラですｗ
コメント