display:none; が効かない

概要

ProgateのHTML＆CSS上級編のレッスンをローカル環境でコーディングしてた際の出来事

レスポンシブデザインを適用する際、デフォルトの状態では要素を非表示にさせたかった。Progateでの指示通りにdisplay:none;で非表示にしようとしたが表示されたままだった。

その時のコード

.menu-icon{display:none;}

対処法

ネットで解決法を探した結果、どこか別の場所で指定しているdisplayが優先されてしまっているのが原因として考えられるとのこと。 そのサイト通り!importantを記述し優先度を上げてあげると見事に解決した。

.menu-icon{display:none!important;}

これを記述すると今度は表示させたい時にも非表示が優先されてしまってるようだったので、表示させるコードにも!importantを記述

@media(max-width:670px){.menu-icon{display:block!important;}}

この方法で表示・非表示の切り替えがされるようになった！
参考にしたサイトは許可をとっていないので載せませんが助かりました！

終わり