Невозможно изменить размер шрифта с помощью @media

Question

Я пытаюсь создать меню, уменьшающее размер шрифта при уменьшении окна браузера. Вот что я получил:

Css:

@media screen and (max-width : 1115px) { 
    /*Make font on menu smaller*/ 
    nav a { 
     font-size: smaller; 
    } 
} 
    nav a { 
     text-decoration: none; 
     display: inline-block; 
     border-bottom: 3px solid transparent; 
     transition: 0.5s ease; 
     white-space: nowrap; 
     height: 20px; 
     color: #171581; 
     padding: 8px 8px 8px 8px; 
     font-family: HelveticaNeue-Thin; 
     font-weight: 100; 
     font-size: medium; 
    } 

HTML

<nav> 
    <label for="show-menu" class="show-menu"></label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
     <li><a href="#" class="top-menu" id="about">About</a></li> 
     <li><a href="#" class="top-menu" id="residential">Residential &amp; Business</a></li> 
     <li><a href="#" class="top-menu" id="myaccountdetails">My Accounts Details</a></li> 
     <li><a href="#" class="top-menu faqs active" id="faq">FAQ</a></li> 
     <li><a href="#" class="top-menu" id="contactus">Contact us</a></li> 
    </ul> 
</nav> 

Насколько я могу сказать от того, что я прочитал на форуме этот должен быть рабочей, но когда я изменяю размер окна, эффекта нет.

Этот вопрос не является точным дубликатом. Этот пост спрашивает, что случилось, другой пост спрашивает, почему это так.

Answer 1

font-size: medium; всегда применяется, как оно появляется после запроса на медиа. Просто изменить порядок ваши стили:

nav a { 
    text-decoration: none; 
    display: inline-block; 
    border-bottom: 3px solid transparent; 
    transition: 0.5s ease; 
    white-space: nowrap; 
    height: 20px; 
    color: #171581; 
    padding: 8px 8px 8px 8px; 
    font-family: HelveticaNeue-Thin; 
    font-weight: 100; 
    font-size: medium; 
} 

@media screen and (max-width : 1115px) { 
    /*This is later in the order of styles, so will be applied when the screen is <= 1115px */ 
    nav a { 
     font-size: smaller; 
    } 
} 

https://jsfiddle.net/xo3cq44t/