Lord Eww Lel Lord Eww Lel - 12 days ago 8
CSS Question

Media Queries Are Not Overriding Each Other

I have a problem with my media queries as it is not overriding each other. The first iteration

(max-width: 960px)
works fine but the second one
(max-width: 380px)
does not work and I do not know why. Help is appreciated, thanks.



.fb {
width: 50px;
margin-left: 20px;
margin-right: 20px;
}

@media only screen and (max-width: 960px) {

/* this works */

.fb {
position: relative;
width: 40px!important;
margin-left: 15px!important;
margin-right: 15px!important;
}
}


@media only screen and (max-width: 380px) {

/* this does not work */
.fb {

width: 30px!important;
margin-left: 10px!important;
margin-right: 10px!important;
}
}

<div class="social_container">
<a href="https://www.facebook.com/" target="_blank"><img class="fb" src= "http://placekitten.com/200/300" alt=""></a>
</div>




Answer

you are wrongly spelled margin-rigth please change it to margin-right and remove !important

.fb {
  width: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
@media only screen and (max-width: 960px) {
  .fb {
    position: relative;
    width: 40px;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media only screen and (max-width: 380px) {
  .fb {
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
  }
}
<div class="social_container">
  <a href="https://www.facebook.com/" target="_blank">
    <img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt="">
  </a>
</div>