CODEWITHSUNDEEP
cssmedia-queries
Viking NM
Viking NM

Reputation: 402

Media query doesn't work on browsers or mobile devices

I'm trying to get a simple media query working and it doesn't seem to work either in browsers (any of them) or the mobile devices. It's in the head tag but didn't think that mattered. I changed the max-width to a high number for testing. Also, I tried with and without the viewport meta tag.

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body { margin:0; padding:0; background:#004716; }
    p { display: inline-table; margin: 5px 5px 10px 7px; padding: 5px 5px 5px 7px; width: 30%; text-align: left; vertical-align: text-top; }
    p.filled { color: #ffffff; background: #709231; }
    p.left { margin: 0 0 0 0; padding: 0 0 5px 0; width: 100%; text-align: left; }

    @media screen (max-width:760px) { p.filled { color: #000000; background: #ff9900; } }
</style>

Upvotes: 0

Views: 183

Answers (2)

m4n0
m4n0

Reputation: 32255

You need to use an operator to separate the two media rules.

and operator or ,(comma) for or operator. and will check for both conditions and , checks for one of the conditions to be true.

@media screen and (max-width:760px) {
   p.filled { 
     color: #000000; 
     background: #ff9900;  
   } 
}

Upvotes: 1

Richa
Richa

Reputation: 4270

you are missing "and" in your rule

@media screen and (max-width:760px) { 
   p.filled { color: #000000; background: #ff9900; } 
}

Upvotes: 1

Related Questions