twitter-bootstrap - 如何使用媒体查询在某些断点处调整 li 元素的大小？

Question

我在页面底部制作了一 block 社交媒体图标。

我想为小于 375 像素的屏幕将它们缩小一半，但我的媒体查询不起作用。

这是我的一些 CSS:

@media (max-width: 275px) {
.custom-social-icon
    padding:5px 7px;
}

.fa-facebook {
padding:10px 14px;
transition: .5s;
background-color: lightsteelblue;
}

还有我的 HTML:

<div class="footer-social-icons">
<ul class="social-icons">
    <li><a href="#" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li>

当我将屏幕调整为小于断点时，图标保持相同大小。我究竟做错了什么？感谢您的帮助!

Answer 1

您在媒体查询“{}”中缺少一些大括号

@media (max-width: 275px) {
 .custom-social-icon{
   padding:5px 7px;
   }
  .fa-facebook {
    padding:10px 14px;
    transition: .5s;
    background-color: lightsteelblue;
   }
 }