2016-09-28 3 views
0

experimental.danielhons.deの下にウェブサイトを作成しています。モバイルデバイスのような小型デバイスやブラウザウィンドウの幅を小さくすると問題が発生します。HTML、CSS - 不明な理由で本体が横方向に広がる

ある時点で、ページは水平方向にスクロール可能になり、右側には空白があります。 Firebugのを使用して

は、私はそれがスクリーンを超えて体タグであることがわかり、私はこのCSSを使用しています

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
    overflow:hidden; 
} 

はどのようにして水平にスクロールされてからページを防ぐことができますか? Screeshot with overflow:auto

+0

私はもうしばらく前に同様の問題を覚えています。私の場合、それはヘッダーイメージでした。あなたは適切なメディアクエリを介して携帯電話のためのより小さい写真を提供することを検討することがあります。 –

+0

私はbackground-size:coverを使用します。私はこれが問題ではないことを願っています。 - これを確認してください:イメージを削除しても動作は変わりません。 – AsconX

答えて

0

body { 
    height: 100%; 
    overflow: auto; 
} 

html { 
    max-width: 100%; 
} 
+0

私はresponsee.cssでこのブロックを使用しましたが、まだ違いはありません。 – AsconX

+0

あなたの上記のCSSの部分を削除します – Komal

+0

私はそれをしました。私はそれをあなたのCSSに置き換えました。 – AsconX

0

このCSSを追加し、私ははっきりとあなたの体タグのoverflow: scroll;セットを持っていることがわかります。 overflow-x:hidden;を使用して、x軸固有のルールのみを上書きできます。

enter image description here

+0

あなたは正しく、responsee.cssの部分を削除してtemplate-style.cssに置き換えましたが、まだ違いはありません。 – AsconX

+0

@AsconX何も削除する必要はありません。既存のCSSを適用するだけで上書きできます –

+0

しかし、私はとにかくいくつかのリワークを行い、未使用のCSSを取り除かなければならないでしょう。テンプレートにはもう必要のないものがたくさんあります。 – AsconX

関連する問題