Media query font-size not working

Question

I searched, but didn't find anything similar to my problem.

#navigation {
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  background: url(../images/bg.jpg) repeat top left;
  z-index: 9999;
}
#navigation a {
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  color: #F2B704;
  text-decoration: none;
}
#navigation a:hover {
  color: #D78E02;
}
@media only screen and (max-device-width: 480px) {
  #navigation a {
    font-size: 10px;
  }
}

<div id="navigation">
  <a href="#galerija">GALERIJA</a>
  <a href="#festival">FESTIVAL</a>
  <a href="#kontakt">KONTAKT</a>
</div>

Media query doesn't result in changing my font-size on smaller screen width, it still stays at 15px. What did I do wrong?

Answer 1

You use max-device-width: 480px in your media query so you have to havemeta viewport to browser detect the width of devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

There is not wrong with your code. You can change max-device-width: 480px to max-width: 480px to see your code works. You only need to add meta viewport in your head tag.

Jsffidle

Answer 2

Try this:

@media  (max-width: 480px) {
#navigation a {
  font-size: 10px !important;
} 
}