私はウェブサイト (summer-band.com) を構築しており、いくつかの要素の幅を 100% に設定してモバイル設定 (< 600px のブラウザー) を微調整しようとしています。残念ながら、これまでに行ったことでは、ヘッダー/コンテナーとナビゲーション バー、およびフッターがすべて異なる幅を放っているように見えます。これを自分で修正することはできないため、支援を求めています。 .
1 に答える
まず、メニュー:#navigation li a
とにはパディングがあるため、ボックス モデルは目的#navigation li.current_page_item a
の動作をしません。である必要があります。これはあなたの繰り返しの問題です。width
100%
width
auto
次に、ヘッダー: You haveは定数に設定されてい#headerImg
ます。メディア クエリでは、おそらくandを作成し、実際のを作成したいと思うでしょう。width
600px
width
height
auto
img
width
100%
下に移動すると、メイン#box
にはwidth
of100%
と padding があります。ボックスモデルのため、これはおそらくあなたが望むことにはなりません。を作りますwidth
auto
。
さらに下に#footer
は、display
ofinline-block
とwidth
of があり100%
ます。display
おそらく、 toblock
およびwidth
toに変更したいと思うでしょうauto
。
ほとんどはこれで終わりだと思いますが、Kickstarter のスクリーンショットで'sをarticle img
'sに設定して明示的に削除することをお勧めします。動画の扱い方がよくわかりません。ごめん。max-width
100%
width
iframe
最後のコメント:適切な s を使用するのではなく、br
s と空のタグを使いすぎているようです。p
margin