Why @media works only when i resize chrome window but not when i use the smartphone test from inspect?

HTML & CSS
1

Im talking about the Toggle Device toolbar from inspect after right+clicking on a page. When i resie the device’s window, the color doesnt change. It does change when i resize chrome’s window on pc though.

Let’s take this code:

<html>
<head>
<style>
#test{
  background-color:red;
  width:100%;
  height:20%;}



@media all and (max-width: 480px) {
   #test {
  background-color:yellow;
            }
                                   }


</style>
</head>
<body>

<div id="test">
</div>

</body>
</html>
2

In order for mobiles to take note of your media queries you need to inform them via the viewport meta tag that you are taking control of things.

Add this to the head of your document.

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

Without that tag they will assume that the viewport is 980px wide and then just shrink it to fit.

(Note that in your example you have 2 different named ids and as #test has no content then nothing will show anyway.)

3

Don’t forget the viewport meta tag.

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

And make sure your selectors are consistent. :wink:

4

Thank you! Yeah my fault for the different ids i eddited my post and changed them though i was actually testing with correct ids

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.