モバイルサイトが正しく表示されない

Question

私のサイトでは右側にパディングが多く、レイアウトが正しく読み込まれないという問題があります。ウィンドウのサイズが変更されたときにデスクトップに正しく表示されますが、携帯電話で表示されたときにヘッダー以外のすべてが壊れます。関連のdivのすべてが480PXの幅に設定され、私はメディアクエリのための私のヘッダー内の次のタグを持っている：ここでは

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

は、デスクトップとモバイルに表示されるかのスクリーンショットと同様に、あります私のモバイルCSSページへのリンク（メニューはモバイルで開かれていますが、余分なスペースはそれにも影響します）。

CSS Page

編集：私は今余裕が画面の全体右側に追加されたわずかに異なる問題を、持っています。多くのdivのピクセル幅を100％に変更し、<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">タグをヘッダーに追加しました。彼らはもはやズームアウトすることはできませんが、あなたはただパッドを見つけるために画面を水平にスクロールすることができます。私は、もはやヘッダーフォントを読み込まない私のfont-faceタグに問題があります。私はcssファイルを更新したので、うまくいけば、それはもはや動作しない理由を示しています。

また

は、ここでのライブサイトへのリンクです：あなたは何で（少なくともないとにかくピクセル単位）と簡単な視線から、ここに明示的な幅を設定すべきではないLink

Answer 1

あなたの問題がどこにあるのか想像してみてください。

まず、「全幅」にしようとしているものに設定した幅を離します。divはブロックレベルの要素なので、幅を設定しないと、幅は100％です。

第2に、設定している他のピクセル幅を取り除き、その代わりにパーセンテージに変更します。

第3に、 'box-sizing'を 'border-box'に設定すると、頭痛の種をたくさん節約することができます（簡単にするために「*」を付けてください）。これにより、パディングとマージンがパーセンテージとして設定された幅の上に追加されなくなります。代わりにボックスのサイジングに含まれます。

最後に、「モバイル」や「デスクトップ」のような考え方から抜け出すことがいかに重要であるかを強調することはできません。ここでは、ビューポートのサイズが異なるだけです。 :)

あなたがライブリンクを持っている場合は、私はこれを適切に見て喜んで共有することができます。

Answer 2

あなたの.cssファイルに次の行を追加します

img{max-width:100% !important}