html - div类显示:none not working

Question

我是 CSS 的新手，所以还在摸索中……

我正在尝试在我的开发底部添加一行图像 website

这适用于桌面浏览器，但我想在移动设备上隐藏除 Trustwave Logo 以外的所有内容。

我的主题是响应式的，以下代码在 jFiddle 中运行良好，但在我的网站上运行不正常。请有人指出我遗漏了什么地方吗？

我知道我需要将内联样式移到 CSS 文件中，但我首先尝试找出 display:none 无法正常工作的原因。

HTML:

<div id="ft">
<div class="ftI">
    <div class="ftT">
        <?php echo $this->getChildHtml('newsletter') ?>
        <?php echo $this->getChildHtml('cms_footer_links') ?>
    </div>
    <div class="ftB">
        <span class="copr"><?php echo $this->getCopyright() ?></span>
        <?php echo $this->getChildHtml('footer_links') ?>
    </div>
</div>
<?php /** ADD LOGOS TO FOOTER */ ?>
<div class="ftLogos" style="width:80%; height:56px; margin:0 auto;">
    <div class="ftFb" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-facebook.png" alt="Find us on FaceBook" /></div>
    <div class="ftTw" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-twitter.png" alt="Follow us on Twitter" /></div>
    <div class="ftSt" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-stripe.png" alt="Secure Card Payments by Stripe" /></div>
    <div class="ftPp" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-paypal.png" alt="Pay Securely by PayPal" /></div>
    <div class="ftTr" style="float:left; width:20%; text-align:center; margin:0 auto;"><script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=normal"></script></div>
</div>

CSS(仅在小屏幕部分):

.ftFb {display:none;}
.ftTw {display:none;}
.ftSt {display:none;}
.ftPp {display:none;}

我很高兴了解是否有更好的格式和提问方式:-)

谢谢，

休

Answer 1

您的问题似乎是您将其隐藏起来。您需要将其从 media=all 中删除

media="all"
.ftTw {
 display: none; 
}

使用 chrome 检查查看 CSS。看起来您的媒体查询正在执行以下操作。因此，除了 ftTr 之外，它们都使用以下代码隐藏。

media="all"
@media screen and (min-width: 768px)
.ftPp {
display: none;
}
media="all"
.ftPp {
display: none;
}

我看到的唯一图标是 ftTr，它始终显示。其余的总是隐藏的。我建议回顾一下你是如何创建媒体 CSS 的。