【CSS】スマホで見ると微妙に左右にズレる現象 → 1行で速攻解決します。

CSS

レスポンシブ対応のサイトを作っている場合、スマホサイズの画面にすると画面が左右に微妙にズレる場合があります。

ほとんどの場合の原因は、サイトの横幅がスマホ画面サイズを超えてしまったことが原因です。

解決するCSSコードは、ズバリ以下の通り。

body {
    overflow-x: hidden;
}

bodyクラスに、「overflow-x: hidden;」の1行追加するだけです。

すでにbodyタグにhidden以外のoverflow設定がされている場合は、
「!important」をつけてやります。

body {
    overflow-x: hidden!important;
}

これだけでスマホ表示した際、画面が微妙にズレることを回避することができます。

その方法としては、サイト内にhtmlコードやcssコードを記載する場合のタグは、
<code></code>ではなく、
<pre></pre>で囲むと解決する場合があります。

\ 第三のエックスサーバー /
進化の極限を目指した 「エックスサーバー」の新たなカタチ。

「シン・レンタルサーバー」は、エックスサーバーのシステムをベースとしつつ、最新技術を盛り込んだ国内最速のレンタルサーバーです。
エックサーバーとの違いは、「スピード」「リソース確保」「アダルティサイト可能」。
それでいてこの価格。
ブログをこれから始める人も、他社サーバーからの乗り換えの人も超絶おすすめなレンタルサーバーです。

しかも、今ならドメインが無料!

CSS
スポンサーリンク
\気になるあの子に教えてあげよう/
Tamoc

コメント

  1. […] body ‘ を探し修正にかかりました。>> 【CSS】スマホで見ると微妙に左右にズレる現象。1行で解決します。しかしサンゴのテーマファイルのうち’スタイルシート’で ‘ […]

タイトルとURLをコピーしました