div类显示：没有不起作用

Question

我是 CSS 新手，所以还是有点摸不着头脑......

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

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

我的主题是响应式的，以下代码在 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。