angry_kiwi angry_kiwi - 1 year ago 119
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>
<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;
<div class="box"></div>

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 Source


max-width instead of max-device-width

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download