media queryがうまくいかない。横幅をキープしてしまう。

制作中のサイトでmqをやっています。
バンドのプロフィールのページのバンド紹介の下にあるメンバー2人の紹介のセクション「section id=”futari_profile」なのですが、画面を狭くしていくと、
フロートが解除されていい感んじになります。そしてもっと狭くしていくと、あるところからメンバー紹介セクション下段が、
幅をキープしてしまい、横スクロールが出現してしまいます。

http://kuulei90.com/?page_id=25

なぜでしょうか?

よろしくお願いいたします。

カテゴリー: ブログ | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

media queryがうまくいかない。横幅をキープしてしまう。」への2件のフィードバック

  1. タカハシ先生タカハシ先生

    まず、同一ページ内のidの重複を修正しましょう。futari_profile、photo、right_boxなどは、複数回使っているのでclassですね。
    次に、media queryの指定の順番も整理しましょう。media query の中括弧の中のcss優先順位は、その括弧の外側と変わりません。ということは、同じファイル内で、同じセレクタならば、下に書いてあるものほど、優先順位が高くなります。
    例えば、600px以下の指定の下に1000px以下の指定をすると、600px以下の指定は上書きされてしまいます。
    600pxは絶対に1000px以下だからです。
    その辺りを考慮して、media queryの指定は、出来るだけ後ろで、IE8以下用のcssの上、にまとめておくのが良いです。
    意図しないレイアウトの検証は、これらを整理した後にしましょう。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA