How can I resize li elements at certain breakpoints using media queries?

Question

I've made a block of social media icons at the bottom of my page.

I'd like to make them half-sized for screens smaller than 375px but my media query isn't working.

Here's some of my CSS:

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

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

And my 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>

When I resize the screen to smaller than the breakpoint, the icons stay the same size. What am I doing wrong? Thanks for your help!

Answer 1

You are missing some curly brackets inside your media query '{}'

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