Q&A
具体的にどんな条件でdisplay:noneにしてるんでしょうか？
メディアクエリの条件がmin-width:768px; max-width:768px;みたいに両方同じ値だと
768px;ぴったりだったときに両方の条件を満たしてしまうことになります
その辺は大丈夫でしょうか？
お世話になります。
webサイト（ワードプレス）にスライダーのプラグインをいれ、
PCとスマホで表示を分けられる様に
display:none を使い、表示・非表示を設定しました。
macやiphoneでは正常に display:none が効いているのですが
windowsのchromeにて両方とも表示されるとの連絡を受け、
同じwindows、os、chromeという 同じ環境で見たところ正常に表示されておりました。
このように、同じOS、ブラウザであってもパソコンによって見え方が違うことはあるのでしょうか？
下記のサイトでwindowsでの見え方は試してみましたが、こちらでも正常に表示されておりました。
https://www.browserling.com/browse/win/7//55%20/http%3A%2F%2Fwww.digg.com
遠方のお客様のパソコンで崩れているため、コードがどのように動いているのか見ることができず
困っております。
何かお知恵をお借りできましたら幸いです。
よろしくお願いいたします。
KazuhiroHatano様
修正のご依頼ありがとうございます。
はい、メディアクエリの条件は、
@media screen and (max-width: 959px) {
@media screen and (max-width: 559px) {
@media screen and (max-width: 320px) {
というので行っております。
htmlは、下記のようになっておりまして。
<div class="slide">
<div class="pc">
<?php echo do_shortcode('PC用スライドのショートコード'); ?>
</div>
<div class="sp">
<?php echo do_shortcode('sp用スライドのショートコード'); ?>
</div>
</div>
cssは、
@media screen and (max-width: 959px) {
のすぐ上に、
.pc{ display: none; } があり、
@media screen and (max-width: 559px) {
.pc{ display: none; }
.sp{ display: inline;
margin-bottom: 30px; }
}
という状態であります。
画面を伸縮してみて、どの画面幅でも両方が表示されることがないか確認しましょう
KazuhiroHatano様
アドバイスいただきありがとうございます！
どの幅でも、両方のスライダーが表示されてしまいました。
回答1件
0
自己解決
display: none !important をつけたら、解決いたしました！
何故ひとつのPCだけ表示がおかしかったのか、はっきりとした原因は謎のままですが
解決したのでよかったです。
KazuhiroHatano様、ご助言を頂き助かりました。どうもありがとうございます。
投稿2020/05/28 03:23
総合スコア14
あなたの回答
tips
プレビュー
