こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

back-ground:noneが効かない

レスポンシブのページを作成中で、PCではback-groundを表示、
スマホ版ではimgで表示を、メディアクエリで切りわけたいのですが
スマホ版でPC用のback-groundを消すための
back-ground:none;が効いてくれません。

http://www.miimeow.com/?tid=3&mode=f1

上記のページの「購入はこちら」「定期購入はこちら」のボタンがある部分をスマホで非表示にしたいのです。

原因は何なのでしょうか。。

恐縮ですがご教授頂ければ幸いです。

こちらがCSSです。

PC

@media screen and (min-width:481px) {

.cam_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/cam-img.jpg) no-repeat; width: 1000px; height: 412px; position: relative; margin: 0 auto; }
.cam_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:18px; }
/*定期便*/
.teiki_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/teiki_img.png) no-repeat; width: 1000px; height: 188px; position: relative; margin: 0 auto; }
.teiki_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:47px; }

}

スマホ
@media screen and (max-width : 480px) {

.cam_kounyu{ display: none!important; background : none; }
.teiki_kounyu{ display: none!important; background : none;}

}

投稿日時 - 2016-09-12 14:44:55

QNo.9228016

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

background:none;
ではなく
background-image:none;
です。

投稿日時 - 2016-09-12 14:56:52

補足

申し訳ありません!質問の内容が違っていました。
background:none;ではなく
display: noneが効かないです。

スマホ対応のこの部分

@media screen and (max-width : 480px) {

.cam_kounyu{ display: none!important;}
.teiki_kounyu{ display: none!important;}

}

投稿日時 - 2016-09-13 08:53:51

お礼

ありがとうございます。
なんとか解決しました。

投稿日時 - 2016-09-13 09:15:58

あなたにオススメの質問