angry_kiwi angry_kiwi - 4 months ago 19
CSS Question

media query won't take precedence

I have some simple CSS and HTML just to see if the media query work. But something 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 and (max-device-width:640px) {
.box {
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>


The box background won't change to blue when viewing in mobile. I use firefox plugin "Go Mobile" to simulate mobile screen environment during the test

Answer

Solution: https://jsfiddle.net/r56m37kb/

max-width instead of max-device-width