TumblrでBootstrap3を導入してウェブサイトを作成しています。
問題はcssにてメディアクエリで調整を試みたところ、
「記述した順番で1番上にあるものが読み込まれない」というものです。
cssにて、とある要素に対して以下のコードを記述しました。
@media (min-width: 991px) {...} /* PC /
@media (min-width: 768px) {...} / Tablet /
@media (man-width: 767px) {...} / mobile */
すると、1番上の「@media (min-width: 991px) {...}」の部分がすっ飛ばされて
2つ目の「Tablet」から読み込まれてしまいます。
PC上で表示させたいレイアウトは無視され、Tablet用のレイアウトから表示されます。
記述の内容に誤りはなく、それぞれ個別では正常に動作します。
同じようなケースがないか調べましたが見当たらず…。
CSSでの記述の順番を「PC→Tabelt→mobile」から「mobile→Tablet→PC」とモバイルファースト的な並びに変えてみると
今度は「mobile」の記述内容がスルーされて、モバイルでの表示が完全に崩れてしまいます。
PC、Tabletは正常なレイアウトで出てきます。
何が原因かわからないのが一番困っています。
解決策を教えて頂けたら一番ありがたいですが、こういうのを試してみたら?というヒントでも構いませんので、何卒宜しくお願いい致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。