ヒント:
display:inlineに対してwidthは適用されません。参考までにimgのデフォルトdisplay値はinline-blockですが、cssで指定しなかった場合親要素の大きさを考慮しなかったはず。
貼られたCSS、何か違和感感じるとおもってよく見てみると対象がdivだったりimgだったりバラバラですね。それが消えない原因かも。
リンク先404です><
HTML見直したらdiv > .sonly と img.sonly とあるんですね。(消えないのそれか!)
あとimportantの使用は必要無さそう……(あまり多用は推奨されません。)
Hinaloe さんありがとうございます。
言い訳をすると、色々迷って試しているうちにぐじゃぐじゃになってしまいました。
以下のように直しましたが、まだPCでは消えません。
スマホの方はこういう風に見えます。http://coolbon.boo.jp/rei.png
同じこと過去にやったんですが、全然問題なかったです。今回何故こうなるのか全く分かりません。
HTML
<div align=”center”><img class=”pconly” src=”http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logo.png” alt=”” /></div>
<div align=”center”><img class=”sonly” src=”http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png” alt=”” /></div>
<div align=”center”><img class=”sonly” src=”http://coolbon.boo.jp/wp-content/themes/twentytwelve/img/tel.png” border=”0″ alt=”” /></div>
CSS
@media screen and (max-width: 600px) {
.pconly { display: none;}
.sconly { display: inline;}
}
@media only screen and (min-width: 601px) {
.pconly { display: inline;}
.sconly { display: none;}
}
<div style="width:955px" align="center" class="sonly"><img src="http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png" alt="" /></div>
のようになっていますよ?(スマホで崩れるのはそれが原因の模様)
PCの方はまだ確認してません…どうやらうまくいってないみたいだけど…
(どっちにしてもdisplay:inlineはよくなさそう)
あとminとmaxを600px,601pxにしてるので事実上「どちらでもない状態」がうまれてます。(px指定だからまぁ大丈夫だろうけど。)
あとバリデータかけるといくつかエラー出てますね。
Hinaloeさんありがとうございます。
<div style=”width:955px” align=”center” class=”sonly”>
は、気づきませんでした。何度かheader部分はアップしているんですが、
何で残っていたか分かりません。再度アップし直して、スマホは
解決しました。
PCは依然として、表示されてしまいます。
@media only screen and (min-width: 601px) {
}
はそもそも設けていませんでした、max-width: 600px だけで、その前に
.pconly { display: inline;}
.sconly { display: none;}
を設けていました。それでもダメでした。
ご指摘のエラーですが、どれもtwentytwelveのテーマのデフォルトの状態で
いじっていないところです。不思議です。
該当の画像:
<img class="sonly" src="http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png" alt="">
classがsonlyになってますよね、noneしているのはsconlyのようですが、いずれかtypoじゃないですか?
Hinaloeさん
すみません、そのようのでした。解決しましたありがとうございます。