I have this css:
.realiser-devis { text-transform: uppercase; font-size: 23px; font-weight: 700; margin: 0; color: #fff; }
and i want to reduce the font size if the screen width is less than 1600 px
@media only screen and (max-width:1600px) { .realiser-devis { font-size: 12px; } } the problem is that the css inside the media query is working without satisfying the condition; the width of my screen is 1800px and the font size is 12 px
is there somthing i'm missing ?
Regards
Amir
You may be missing the responsive meta tag in the <head> section.
Make sure you have this in the <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1"> Read more about that here.
Please check width of screen using this command in your console while inspecting
console.log(window.screen.width) if it's still 1800 please reduce your media query max-width to 500 and check, if it works then you should check what issue with screen width you have.
Otherwise please try using media queries without key word only(it can affect older browsers):
@media screen and (max-width:1600px) { .realiser-devis { font-size: 12px; } } 
<meta name="viewport" content="width=device-width, initial-scale=1"> useful information : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
