質問概要
PC表示の時は、画面の80%まででページを表示し、スマフォ表示の時は100%でページを表示したい。
質問詳細
フロントエンド苦手です。
一緒にbootstrapを使っているのですが、グリッドシステム(?)くらいしか使っていません。
ナビゲーションメニューバーに不満があったため、そこを自作しております。
今、グリッドシステムのdivにヘッダー、メイン要素、フッターを入れております。
そしてそのグリッドシステムのdivに、独自定義した幅の指定(limited-width
)をしています。
HTML
1<div class="container-fluid limited-width debug"> 2 <header class="center-block"></header> 3 <div class="row center-block"> 4 5 <!-- メイン要素 --> 6 <div class="col-sm-8"> 7 あああ 8 </div> 9 10 <!-- サブ要素 --> 11 <div class="col-sm-4"> 12 いいい 13 </div> 14 15 </div> 16 17 <footer></footer> 18</div>
limited-width
は、以下のように定義しています。
CSS
1.limited-width{ 2 width: 80%; 3}
更に、レスポンシブ用のCSSは以下のように書いております。
CSS
1@media (max-width: 479px){ 2 .limited-width{ 3 width: 100%; 4 } 5}
しかし、ブラウザのサイズを小さくしても、divのwidthは80%のまんまです……
これは何がいけないのでしょうか。
ご存じの方がいらっしゃいましたら、ご教示願います。
確認ブラウザは、
Firefox48.0.1です。
回答1件
あなたの回答
tips
プレビュー