Media query font-size not working
12,459
Solution 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.
Solution 2
Try this:
@media (max-width: 480px) {
#navigation a {
font-size: 10px !important;
}
}
Solution 3
try this one
@media only screen and (max-device-width: 480px) {
#navigation a {
font-size: 10px !important;
}
}
Author by
Igor Jevremovic
Updated on June 22, 2022Comments
-
Igor Jevremovic almost 2 years
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 at15px
. What did I do wrong? -
Igor Jevremovic over 8 yearsThis one worked best, tnx, I thought I needed that meta code only for responsive pages, not a simple navigation transformation :)
-
Alex over 8 yearsExplain your answer.From review.