CODEWITHSUNDEEP
htmlcssmedia
Igor Jevremovic
Igor Jevremovic

Reputation: 179

Media query font-size not working

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?

Upvotes: 6

Views: 17916

Answers (4)

Terry
Terry

Reputation: 176

4 years later...

Sorry for the delay in responding, Igor. Thanks for waiting. 8)

In case you are still interested in an answer to this, or if others who find this are, I tested your code and found that if I change the media tag option from "max-device-width:" to "max-width:", the font size changed. But I guess it depends on the device size vs. the browser size, so this might not solve it for you.

If that doesn't solve it, try experimenting with larger browser widths like "max-width: 800" or whatever, to ensure your browser width is definitely triggering the media query.

Let me know how you get on.

Upvotes: 0

Ketan Savaliya
Ketan Savaliya

Reputation: 1210

Try this:

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

Upvotes: 5

Alex
Alex

Reputation: 8695

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

Upvotes: 8

JdAkram
JdAkram

Reputation: 76

try this one

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

Upvotes: 3

Related Questions