Question

我是CSS的新手，所以仍然找到了一点......

我正在尝试在开发website

的底部添加一行图像

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

我的主题是响应式的，以下代码在jFiddle中工作正常，但在我的网站上却没有。请有人指出我错过的地方吗？

我知道我需要将内联样式移到CSS文件中，但首先要尝试查找显示为什么：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; 
}

使用铬检查查看css。看起来您的媒体查询正在执行以下操作。因此对于除ftTr以外的所有内容，使用以下代码隐藏它们。

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

我看到的唯一图标是ftTr，它始终显示。其余的总是隐藏的。我建议您查看如何创建媒体css。

Div类显示：无效

1 个答案: