There is a code, I want to add a media query with a resolution of 992px. I look through the code inspector, but everything is as it was, so it is - media styles have not been applied. Help, what's the matter?

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700|Roboto:400,700" rel="stylesheet"> <title>Layout</title> </head> <body> <div class="logo"> <a href=""><img src="img/logo.png" alt="" class="header_logo"></a> </div> <style> .logo { padding-top: 52px; } @media screen and (max-width: 992px) { .logo { display: block; margin: 0 auto; } } </style> <!--мой код--> </body>
  • Put @media at the beginning of the CSS file. - Andrey
  • Styles should be above the elements, it seems to be an axiom, otherwise collisions are possible, why do you need this experiment ??? if it does not help, then two reasons remain - 1. Overlap by other styles. 2. The screen width is larger than your 992px. - Sergey V.

2 answers 2

Everything is working

 .logo { display: inline-block; background: #000; height: 40px; width: 150px; color: #fff; } .logo:after { content: 'Больше 992px'; display: inline-block; } @media screen and (max-width: 992px) { .logo { background: #00f; } .logo:after { content: 'Меньше 992px'; } } 
 <div class="logo"></div>

    And the @media itself under the desired tag is visible in the console? If you see, but do not apply, try! Important to put down, but it is better to do without it in some other way, of course. I myself would be interested to know how. And best of all, lay out a screen from the console - perhaps the styles overlap.

     @media screen and (max-width: 992px) { .logo { display: block !important; margin: 0 auto !important; } }
    • Thanks, earned! =) - Katya Puhovskaya