Wordpress カスタマイズについて

質問

Wordpress/Twenty Twelveカスタマイズについて

Wordpressフォーラムに投稿すべきなのでしょうが、なぜか
投稿がうまくいきませんので、こちらで失礼します。

以下の内容、アドバイスを頂けると幸いです。

Wordpress/Twenty Twelveのテーマを現在カスタマイズしております。
style.css にて、メインナビゲーションメニューの各項目の後ろに、背景画像を
設定しました。ただ、それをレスポンシブル（おもにスマホ）の際は非表示と
したいのですが…

＞PCの場合のstyle.css

.main-navigation ul.nav-menu li,
.main-navigation div.nav-menu > ul li {
background-image: url(/メニュー背景.png);
background-repeat: no-repeat;
background-position: center;
max-width: 100%;
}

＞スマホの場合の縮小設定
@media screen and (min-width: 600px) { 以下に…

.main-navigation ul.nav-menu li,
.main-navigation div.nav-menu > ul li {
background-image: url(/メニュー背景.png);
background-repeat: no-repeat;
background-position: center;
max-width: 100%;
background-img: none;
}

こういった記述をしておりますが、これだけではスマホで閲覧した際
非表示にならないようで、困っております…。

何かミスをしている、もしくは欠けていることがありますでしょうか。
初心者なので、記述場所等もご指摘くださると幸いです。

以上
よろしくお願いします。

回答No.1

DrFell

Wordpress・Twenty Twelveともに関係ないような気がしますが……。

何の、初心者かよくわからないので、疑問だけ。

＞スマホの場合の縮小設定
@media screen and (min-width: 600px) { 以下に…
.main-navigation ul.nav-menu li,
.main-navigation div.nav-menu > ul li {
background-image: url(/メニュー背景.png);★なんで、非表示にしたいのに指定するかな？
background-repeat: no-repeat;★なんで、非表示にしたいのに指定するかな？
background-position: center;★なんで、非表示にしたいのに指定するかな？
max-width: 100%;
background-img: none;★これ、何？新しく独自に作成したプロパティですか？？他はimageなのにここだけimg？？
}

初心者はカスタマイズなんかしないほうがいいですよ。今は表示されるだけかもしれませんが、そのうち大崩れしますよ。
自分で調べる気のある人なら、せめて、検証ツールやサービスとか使いませんかね？機械的にチェックできるでしょ？
【例】
http://jigsaw.w3.org/css-validator/#validate-by-input