Media query CSS overriding CSS without satisfying the width condition

user_17194574 0
Viewed 70

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

frontend css html javascript
3 Answers

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.

user_88015990

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;
    }
}​
user_159061830
user_112992610
Related