レスポンシブルデザイン対応のCSSを作成しているのですが、
リストのwidthだけがPC用の表示のものが継承されてしまいます。
PC用のものはliをwidth:20%にして、5つのメニューをぴったりと並べています。
レスポンシブルデザイン用に
@media screen and (max-width: 600px) {}内のulをdisplay: none;にし、jqueryを使ってtoggleで表示させるようにしています。
その際にliをwidth:100%にしているのですが、上記のPC用のものを継承してしまいます。
他の@media screen and (max-width: 600px) {}内のIDやクラスは継承されているので、@media screen and (max-width: 600px) {}内の記述ミスではないようです。
単純なつづりミスやheight:auto;の入れ忘れも確認しましたが、問題ありませんでした。
liのwidth:100%に!importantも挿入してみましたが、継承しません。
また、レスポンシブルデザイン用の記述はPC用のものの後に記述してあります。
CSSなので、実際にサイトをお見せしないとご回答されにくいと思いますが、仕事で製作途中のものなので、お見せすることができません。
もっと他に試せることや、検証すべきことがありましたらご教授願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。