スマホ(max-width:900px)とPCで表示内容を変えたい

Question

実現したいことは下記です。
downloadクラスが,,,
・900px以下では表示される
・901px以上では表示されない。

やり方わかるかたいますでしょうか。。よろしくお願いします。
追記１：ブラウザの検証機能ではdisplay:noneにすると消えるので901px以上で消えるようにしたいです。

<div class="download">
    <p style="
  color: #fff;font-size: 20px;font-weight: bold;color: #fff;">今すぐ開始。</p>
        <img id="mobile_qr_img" src="./images/QR_code.png" alt="QRコード">
        </div>

.download{
    display:none;
}
...

@media screen and (max-width:900px){
.download {
    position: static;
    padding: 28px 0;
    background-color: #000;
    font-size: 0;
    height: auto;
    margin-top:20px;
}
@media screen and (min-width:901px){
.download{
display: none;
}
}

Comments

[x_x]

900px以上に900pxが含まれます。要件を確認してください

[wataame]

大変失礼いたしました、、「900px以下では表示される」、「901px以上では表示されない。 」で大丈夫でしょうか。。（一部内容追記しています。）

Answer 1

@media screen and (max-width:900px){
.download {
    position: static;
    padding: 28px 0;
    background-color: #000;
    font-size: 0;
    height: auto;
    margin-top:20px;
}
}/* ←足りてないのでは？ */
@media screen and (min-width:901px){
.download{
display: none;
}
}

Comments

[wataame]

できました、、原因２つありました。
・.dwonladクラスがもう１つあった
・ } を忘れていた

お手数おかけしました。
回答ありがとうございます。

Answer 2

max-width:900pxの.downloadにdisplay: block;を追加するだけじゃダメですかね？

Comments

[wataame]

download {
position: static;
padding: 28px 0;
background-color: #000;
font-size: 0;
height: auto;
margin-top:20px;
display: block;
}
追記してみましたが表示されます。。display: block;縦並びのイメージなのですが合っていますでしょうか。

[madoka9393]

https://jsfiddle.net/tfzb9L1o/
上記動作するサンプル(白い部分の枠線を横に引っ張ると非表示になる)ですが、
こちらでは再現確認できませんね…。
(「縦並びのイメージ」が理解できませんでした…)

[wataame]

できました、、原因２つありました。
・.dwon;adクラスがもう１つあった
・ } を忘れていた

お手数おかけしました。
回答ありがとうございます。