css - media query won't take precedence -
i have simple css , html see if media query work. wrong
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .box { background: red; width: 100px; height: 200px } /* mobile phones */ @media screen , (max-device-width:640px) { .box { background: blue; } } </style> </head> <body> <div class="box"></div> </body> </html> the box background won't change blue when viewing in mobile. use firefox plugin "go mobile" simulate mobile screen environment during test
solution: https://jsfiddle.net/r56m37kb/
max-width instead of max-device-width