@media only screen and (max-width: 479px) not working for mobile

css, html, responsive-design

Solution

In the head of your document, make sure you have

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

If you omit this, then many devices will scale the page to fit the viewport.

Problem

My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me. ``` @media only screen and (max-width: 1024px) { body{ background-color:#ff0000; } } @media only screen and (max-width: 767px) { body{ background-color:#000; } } @media only screen and (max-width: 479px) { body{ background-color:#111; } } ```

Original source