Safari does not load media queries

Question

This is not the first time, safari is ignoring my media queries. I am using the below style in .scss/sass .

    #reality-check-content {
    @media screen and (max-width: 480px){
        width: 45% !important;
    }
   }

When i test on chrome it works and return

 @media screen and (max-width: 480px)
 #reality-check-content {
   width: 45%!important;
 } 

Likewise in firefox it works . However, in safari it does not , i just dont see my media queries. This is not the first time, i tried hiding an element the other day , it works in every browser but safari. The point is it does not seem to be loading my styling.

Answer 1

You have to use brackets for @media queries.

@media screen and (max-width: 480px){
  #reality-check-nav {
    width: 45%!important;
  }
}