Why with this code like this:

@media all and (max-width: 1000px){ body{ background-color: black; } }

If you put a number> 1000px instead of 1000px, everything works. As soon as the number <1000 stops working at all. What is the reason?

Here is the project itself: https://github.com/avoska/transformers

  • Scale in the browser is not 100%. Ctrl + wheel. - Andrey Fedorov
  • i.imgur.com/o1iMwKR.png I set max-width: 800, does not work: ( - Dima Svobodin
  • Well, are you sure that for all this you can see at least a piece of the background body? - Andrey Fedorov
  • Here is the result at 1500 i.imgur.com/3wrD2Zv.png - Dima Svobin
  • Well, if you are sure, then add your code to the question or, at worst, a link to the project, so that there is something to work with, otherwise we are not telepaths, right? - Andrey Fedorov

1 answer 1

To work with @media you need to connect to the head :

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

Use only screen instead of all :

 @media only screen and (max-width:1000px) { //some active }

Example :

 .someClass { height: 200px; width: 200px; background-color: black; } @media only screen and (max-width: 1000px) { .someClass { background-color: orange; } } 
 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="someClass"> </div> </body>