Не работает @media запрос

198

11 ноября 2018, 03:10

Есть код, хочу добавить медиа-запрос с разрешением 992px. Смотрю через инспектор кода, но все как было, так и есть - стили медиа не применились. Помогите, в чем дело?

    <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>

Answer 1

Все работает

.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>

Answer 2

А сам @media под нужным тегом виден в console? Если виден, но не применяется то, попробуй !important проставить, а лучше конечно без него обойтись каким-то другим образом. Мне самому будет интересно узнать - каким. А лучше всего выложите скрин из console - возможно стили перекрываются.

@media screen and (max-width: 992px) {
    .logo {
    display: block !important;
    margin: 0 auto !important;
    }
    }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Заполнение пользовательского SVG progress bar

В своей простейшей форме я хочу сделать страницу загрузки, такую как на этом сайте

164

HTML

Верстка текста в треугольнике

Подскажите как сверстать вот такой треугольник (смотрите на фото), что-бы в нем был текст и что-бы все заголовки были выровнены правильноПыталась...

179

HTML

Работа с объектом, сохраненным в сессии, на странице jsp

В session хранится List<Task>Я хочу выводить объект task, после чего проверять значение некого атрибута, и если оно равно заданному значению, то добавлять...

163

HTML

JSTL Статический код в jsp

Здравствуйте есть коды в jsp который позволяет добавить ответ на вопросу и увидеть все ответыВ БД ответ хранит id вопроса

171