What are the reasons why copper queries may not work?

Question

Why can not media queries work? I do everything as expected: the requests themselves always go to the end of the document, they were written without errors @media screen and (max-width: 1200px) {} I even tried to connect them with a separate file after the main one. But all the same, on the specified permissions, they are not that they are not used, but they are not in principle.

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .otziv_wrapper { margin: 80px 0; font-family: "firasans"; } .otziv_block { position: relative; /* border-radius: 15px; border-left: 7px solid; border-bottom: 7px solid; border-color: #0086a9;*/ background: #fff; } .otziv_preview { position: relative; min-height: 190px; margin-bottom: 7px; } .otziv_preview:before { content: ''; display: inline-block; width: 515px; height: 203px; position: absolute; top: -7px; left: 0; background-image: url("../img/img-line_1.png"); background-repeat: no-repeat; background-position: center center; } .otziv_preview:after { content: ''; display: inline-block; width: 370px; height: 103px; position: absolute; bottom: -102px; right: 55px; background-image: url("../img/img-line_2.png"); background-repeat: no-repeat; background-position: center center; } .otziv_preview-img { position: absolute; left: 60px; bottom: 0; } .otziv_preview-text { max-width: 490px; font-size: 18px; line-height: 24px; color: #000; float: right; } .otziv_step1 { position: relative; margin: 70px 0 75px; } .otziv_step1:after { content: ''; display: inline-block; width: 376px; height: 118px; position: absolute; right: 51px; bottom: -75px; background-image: url("../img/img-line_3.png"); background-repeat: no-repeat; background-position: center center; } .otziv_step1-text { max-width: 510px; margin-left: 40px; } .otziv_step-text-title { font-size: 18px; margin-bottom: 20px; } .otziv_step-text-name { font-size: 16px; } .otziv_step-text-item { font-size: 16px; line-height: 20px; padding-right: 40px; } .otziv_step1-img { position: absolute; right: 150px; top: -39px; } .otziv_step-loc { position: absolute; width: 147px; height: 187px; text-align: center; background-image: url("../img/img_location.png"); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; } .otziv_step1-loc_pos { top: -25px; right: -13px; } .otziv_step-loc_text { margin-top: 35px; font-family: "firasansmedium"; font-size: 16px; color: #29507a; line-height: 24px; letter-spacing: -0.12em; } .otziv_step-loc_num { font-family: "firasansmedium"; font-size: 30px; color: #fff; position: absolute; bottom: 13px; left: 50%; margin-left: -7px; } .otziv_step2 { position: relative; padding-top: 50px; margin-bottom: 80px; } .otziv_step2:before { content: ''; display: inline-block; position: absolute; left: 83px; top: -7px; width: 430px; height: 103px; background-image: url(../img/img-line_4.png); background-repeat: no-repeat; background-position: center center; } .otziv_step2-video { position: absolute; z-index: 100; left: 180px; top: 50%; margin-top: -70px; width: 270px; height: auto; overflow: hidden; border: 1px solid #b8b8b8; background-color: #fff; } .otziv_step2-video_text-wr { padding: 5px; } .otziv_step2-video_text { margin-bottom: 3px; font-size: 8px; color: #141414; } .otziv_step2-video_subscribe { font-size: 8px; color: #fff; text-align: center; padding: 2px 5px; border-radius: 5px; background-color: #ff2d02; } .otziv_step2-video_subscribe:hover { color: #fff; text-decoration: none; } .otziv_icon-yt { display: inline-block; vertical-align: middle; width: 11px; height: 6px; margin-right: 5px; margin-top: -2px; background-image: url(../img/icon_yt.png); -webkit-background-size: cover; background-size: cover; } .otziv_step2-text { float: right; max-width: 430px; } .otziv_step2-loc_pos { left: 15px; top: 45px; } .otziv_step3 { padding-top: 95px; padding-bottom: 50px; } .otziv_step3:after { content: ''; display: inline-block; position: absolute; left: 78px; top: -126px; width: 378px; height: 116px; background-image: url(../img/img-line_5.png); background-repeat: no-repeat; background-position: center center; } .otziv_step3:before { content: ''; display: inline-block; position: absolute; top: -17px; right: 55px; width: 430px; height: 103px; background-image: url(../img/img-line_6.png); background-repeat: no-repeat; background-position: center center; } .otziv_step3-loc_pos { right: -14px; top: 43px; } .otziv_step3-text { max-width: 440px; margin-left: 50px; } .otziv_step3-item { font-size: 18px; } .otziv_step3-email-wr { position: absolute; right: 135px; top: 40px; text-align: center; } .otziv_step3-email { font-family: "firasansbold"; font-size: 40px; color: #004f7c; letter-spacing: -0.08em; } .otziv_step3-email-icon { margin-top: 50px; } .otziv_get-gift { margin-top: 50px; font-family: "firasansbold"; font-size: 80px; color: #cf2712; text-align: center; } .otziv_get-gift:before { content: ''; display: inline-block; position: absolute; right: 49px; top: -100px; width: 86px; height: 146px; background-image: url(../img/img-line_7.png); } .otziv_forma-wr { margin-top: 70px; } .otziv_forma { width: 615px; height: auto; margin: 0 auto; padding: 35px 55px; border: 6px solid #0086a9; border-radius: 20px; background-color: #f9f9f9; } .otziv_forma-input { width: 240px; height: 35px; font-size: 14px; padding-left: 15px; margin-bottom: 13px; border: 1px solid #d3d3d3; background-color: #fff; } .otziv_forma-input::placeholder { color: #bbbbbb; } .otziv_forma-input:nth-child(odd) { float: left; } .otziv_forma-input:nth-child(even) { float: right; } .otziv_forma-button { display: block; width: 240px; height: 40px; margin: 0 auto; padding: 0; font-family: "firasansbold"; font-size: 16px; text-transform: uppercase; text-align: center; color: #fff; border: none; background-color: #0076b0; } .some_test { background-color: #ccc; } @media screen and(max-width: 992px) { .some_test { background-color: #ff00ca; } .otziv_wrapper { background: green; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Otziv</title> <link rel="stylesheet" href="cssnew/style.css"> <link rel="stylesheet" href="css/otziv_grid.css"> <link rel="stylesheet" href="css/otziv_style.css"> </head> <body> <div class="some_test">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Что назад жизни запятой составитель безорфографичный родного всеми возвращайся пояс деревни они использовало предупреждал даже мир, реторический маленькая, бросил грустный.</div> <div class="otziv_wrapper"> <div class="container"> <div class="otziv_block otziv_preview"> <img src="img/img-1.png" alt="" class="otziv_preview-img"> <div class="otziv_preview-text">Выполните всего три действия, и получите сертификат* на покупку в интернет-магазине avantsb.ru на сумму от 1000 руб. Для этого Вам нужно выполнить 3 условия.</div> </div> <div class="otziv_block otziv_step1"> <div class="otziv_step1-text"> <div class="otziv_step-text-title">1. Записать мини обзор на квадроцикл Avantis или ATV Classic</div> <div class="otziv_step-text-item">Видео должно содержать:</div> <div class="otziv_step-text-item">- проговорено полное название квадроцикла</div> <div class="otziv_step-text-item">- возраст ребенка (детей), для которого был приобретен <br /> квадроцикл</div> <div class="otziv_step-text-item">- демонстрация поездки ребенка на квадроцикле <br /> (желательно в защитной экипировке)</div> <div class="otziv_step-text-item">- поделитесь своими впечатлениями от использования <br /> квадроцикла Avantis (от взрослого и ребенка)</div> </div> <img src="img/img-2.png" alt="" class="otziv_step1-img"> <div class="otziv_step-loc otziv_step1-loc_pos"> <div class="otziv_step-loc_text">Запиши видео о квадроцикле Avantis</div> <div class="otziv_step-loc_num">1</div> </div> </div> <div class="otziv_block otziv_step2 clearfix"> <div class="otziv_step-loc otziv_step2-loc_pos"> <div class="otziv_step-loc_text">Опубликуй видео <br />на своем <br />youtube-канале</div> <div class="otziv_step-loc_num">2</div> </div> <div class="otziv_step2-video"> <iframe width="270px" height="190px" src="https://www.youtube.com/embed/UwtqfCbWDo4" frameborder="0" allowfullscreen></iframe> <div class="otziv_step2-video_text-wr"> <div class="otziv_step2-video_text">Модель квадроцикла (пример: Отзыв о квадроцикле Avantis mirage 8)</div> <a href="#" class="otziv_step2-video_subscribe"><i class="otziv_icon-yt"></i>Подписаться</a> </div> </div> <div class="otziv_step2-text"> <div class="otziv_step-text-title">2. Опубликовать видео на Вашем канале youtube с подписью: </div> <div class="otziv_step-text-item">Название видео:</div> <div class="otziv_step-text-item">- Модель квадроцикла (пример: Отзыв о квадроцикле Avantis Mirage 8)</div> <div class="otziv_step-text-item">Описание видео:</div> <div class="otziv_step-text-item">- название квадроцикла (квадроцикл Avantis Mirage 8)</div> <div class="otziv_step-text-item">- ссылка на наш сайт: http://www.avantsb.ru</div> <div class="otziv_step-text-item">- ссылка на наш канал на youtube: https://www.youtube.com/user/MyAvantis»</div> </div> </div> <div class="otziv_block otziv_step3"> <div class="otziv_step-loc otziv_step3-loc_pos"> <div class="otziv_step-loc_text">Запиши видео о <br />квадроцикле Avantis</div> <div class="otziv_step-loc_num">3</div> </div> <div class="otziv_step3-text"> <div class="otziv_step3-item">3. Отправить ссылку на видео нам на почту <br /><br />* Сертификат может быть использован только один раз. Он не подлежит возврату и обмену на деньги ни полностью, ни частично. Разница суммы, оставшаяся после покупки, не возвращается. Если стоимость выбранных товаров выше номинала сертификата, разницу нужно доплатить .</div> </div> <div class="otziv_step3-email-wr"> <div class="otziv_step3-email">otzyv@avantismotors.ru</div> <img src="img/img-3.png" alt="" class="otziv_step3-email-icon"> </div> </div> <div class="otziv_block otziv_get-gift"> Получи подарок </div> <div class="otziv_forma-wr"> <form action="#" class="otziv_forma clearfix"> <input type="text" placeholder="Имя" class="otziv_forma-input"> <input type="text" pattern="\d [0-9]" placeholder="Телефон" class="otziv_forma-input"> <input type="text" placeholder="E-mail" class="otziv_forma-input"> <input type="text" placeholder="Ссылка на видео" class="otziv_forma-input"> <button class="otziv_forma-button">Отправить</button> </form> </div> </div> </div> </body> </html>

@ConstantineShibaev still tell you is used on the site minifiers for css ?
@Grundy Well, about this option I do not work out in any browser.

Accepted Answer · 2017-07-04T10:19:40

Here your code works, because <meta name="viewport" content="width=device-width, initial-scale=1"> added here.

Here are two examples you can see on the bare html file.

The first one is using meta viewport and with it media queries work fine.

 <style> body{ background: black; } @media screen and (max-width: 500px) { body{ background: red; } } </style> <meta name="viewport" content="width=device-width, initial-scale=1">

This is a screen with a viewport

And the second example is like this, just remove <meta name="viewport" content="width=device-width, initial-scale=1"> , and the media request does not work.

 <style> body{ background: black; } @media screen and (max-width: 500px) { body{ background: red; } } </style>

And this is without a viewport :

Here is described in detail about the viewport .

Well, so be it? )))) You wrote so @media screen and(max-width: 992px) , but you should like this @media screen and (max-width: 992px) , a space after and

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .otziv_wrapper { margin: 80px 0; font-family: "firasans"; } .otziv_block { position: relative; /* border-radius: 15px; border-left: 7px solid; border-bottom: 7px solid; border-color: #0086a9;*/ background: #fff; } .otziv_preview { position: relative; min-height: 190px; margin-bottom: 7px; } .otziv_preview:before { content: ''; display: inline-block; width: 515px; height: 203px; position: absolute; top: -7px; left: 0; background-image: url("../img/img-line_1.png"); background-repeat: no-repeat; background-position: center center; } .otziv_preview:after { content: ''; display: inline-block; width: 370px; height: 103px; position: absolute; bottom: -102px; right: 55px; background-image: url("../img/img-line_2.png"); background-repeat: no-repeat; background-position: center center; } .otziv_preview-img { position: absolute; left: 60px; bottom: 0; } .otziv_preview-text { max-width: 490px; font-size: 18px; line-height: 24px; color: #000; float: right; } .otziv_step1 { position: relative; margin: 70px 0 75px; } .otziv_step1:after { content: ''; display: inline-block; width: 376px; height: 118px; position: absolute; right: 51px; bottom: -75px; background-image: url("../img/img-line_3.png"); background-repeat: no-repeat; background-position: center center; } .otziv_step1-text { max-width: 510px; margin-left: 40px; } .otziv_step-text-title { font-size: 18px; margin-bottom: 20px; } .otziv_step-text-name { font-size: 16px; } .otziv_step-text-item { font-size: 16px; line-height: 20px; padding-right: 40px; } .otziv_step1-img { position: absolute; right: 150px; top: -39px; } .otziv_step-loc { position: absolute; width: 147px; height: 187px; text-align: center; background-image: url("../img/img_location.png"); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; } .otziv_step1-loc_pos { top: -25px; right: -13px; } .otziv_step-loc_text { margin-top: 35px; font-family: "firasansmedium"; font-size: 16px; color: #29507a; line-height: 24px; letter-spacing: -0.12em; } .otziv_step-loc_num { font-family: "firasansmedium"; font-size: 30px; color: #fff; position: absolute; bottom: 13px; left: 50%; margin-left: -7px; } .otziv_step2 { position: relative; padding-top: 50px; margin-bottom: 80px; } .otziv_step2:before { content: ''; display: inline-block; position: absolute; left: 83px; top: -7px; width: 430px; height: 103px; background-image: url(../img/img-line_4.png); background-repeat: no-repeat; background-position: center center; } .otziv_step2-video { position: absolute; z-index: 100; left: 180px; top: 50%; margin-top: -70px; width: 270px; height: auto; overflow: hidden; border: 1px solid #b8b8b8; background-color: #fff; } .otziv_step2-video_text-wr { padding: 5px; } .otziv_step2-video_text { margin-bottom: 3px; font-size: 8px; color: #141414; } .otziv_step2-video_subscribe { font-size: 8px; color: #fff; text-align: center; padding: 2px 5px; border-radius: 5px; background-color: #ff2d02; } .otziv_step2-video_subscribe:hover { color: #fff; text-decoration: none; } .otziv_icon-yt { display: inline-block; vertical-align: middle; width: 11px; height: 6px; margin-right: 5px; margin-top: -2px; background-image: url(../img/icon_yt.png); -webkit-background-size: cover; background-size: cover; } .otziv_step2-text { float: right; max-width: 430px; } .otziv_step2-loc_pos { left: 15px; top: 45px; } .otziv_step3 { padding-top: 95px; padding-bottom: 50px; } .otziv_step3:after { content: ''; display: inline-block; position: absolute; left: 78px; top: -126px; width: 378px; height: 116px; background-image: url(../img/img-line_5.png); background-repeat: no-repeat; background-position: center center; } .otziv_step3:before { content: ''; display: inline-block; position: absolute; top: -17px; right: 55px; width: 430px; height: 103px; background-image: url(../img/img-line_6.png); background-repeat: no-repeat; background-position: center center; } .otziv_step3-loc_pos { right: -14px; top: 43px; } .otziv_step3-text { max-width: 440px; margin-left: 50px; } .otziv_step3-item { font-size: 18px; } .otziv_step3-email-wr { position: absolute; right: 135px; top: 40px; text-align: center; } .otziv_step3-email { font-family: "firasansbold"; font-size: 40px; color: #004f7c; letter-spacing: -0.08em; } .otziv_step3-email-icon { margin-top: 50px; } .otziv_get-gift { margin-top: 50px; font-family: "firasansbold"; font-size: 80px; color: #cf2712; text-align: center; } .otziv_get-gift:before { content: ''; display: inline-block; position: absolute; right: 49px; top: -100px; width: 86px; height: 146px; background-image: url(../img/img-line_7.png); } .otziv_forma-wr { margin-top: 70px; } .otziv_forma { width: 615px; height: auto; margin: 0 auto; padding: 35px 55px; border: 6px solid #0086a9; border-radius: 20px; background-color: #f9f9f9; } .otziv_forma-input { width: 240px; height: 35px; font-size: 14px; padding-left: 15px; margin-bottom: 13px; border: 1px solid #d3d3d3; background-color: #fff; } .otziv_forma-input::placeholder { color: #bbbbbb; } .otziv_forma-input:nth-child(odd) { float: left; } .otziv_forma-input:nth-child(even) { float: right; } .otziv_forma-button { display: block; width: 240px; height: 40px; margin: 0 auto; padding: 0; font-family: "firasansbold"; font-size: 16px; text-transform: uppercase; text-align: center; color: #fff; border: none; background-color: #0076b0; } .some_test { background-color: #ccc; } @media screen and (max-width: 992px) { .some_test { background-color: #ff00ca; } .otziv_wrapper { background: green; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Otziv</title> <link rel="stylesheet" href="cssnew/style.css"> <link rel="stylesheet" href="css/otziv_grid.css"> <link rel="stylesheet" href="css/otziv_style.css"> </head> <body> <div class="some_test">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Что назад жизни запятой составитель безорфографичный родного всеми возвращайся пояс деревни они использовало предупреждал даже мир, реторический маленькая, бросил грустный.</div> <div class="otziv_wrapper"> <div class="container"> <div class="otziv_block otziv_preview"> <img src="img/img-1.png" alt="" class="otziv_preview-img"> <div class="otziv_preview-text">Выполните всего три действия, и получите сертификат* на покупку в интернет-магазине avantsb.ru на сумму от 1000 руб. Для этого Вам нужно выполнить 3 условия.</div> </div> <div class="otziv_block otziv_step1"> <div class="otziv_step1-text"> <div class="otziv_step-text-title">1. Записать мини обзор на квадроцикл Avantis или ATV Classic</div> <div class="otziv_step-text-item">Видео должно содержать:</div> <div class="otziv_step-text-item">- проговорено полное название квадроцикла</div> <div class="otziv_step-text-item">- возраст ребенка (детей), для которого был приобретен <br /> квадроцикл</div> <div class="otziv_step-text-item">- демонстрация поездки ребенка на квадроцикле <br /> (желательно в защитной экипировке)</div> <div class="otziv_step-text-item">- поделитесь своими впечатлениями от использования <br /> квадроцикла Avantis (от взрослого и ребенка)</div> </div> <img src="img/img-2.png" alt="" class="otziv_step1-img"> <div class="otziv_step-loc otziv_step1-loc_pos"> <div class="otziv_step-loc_text">Запиши видео о квадроцикле Avantis</div> <div class="otziv_step-loc_num">1</div> </div> </div> <div class="otziv_block otziv_step2 clearfix"> <div class="otziv_step-loc otziv_step2-loc_pos"> <div class="otziv_step-loc_text">Опубликуй видео <br />на своем <br />youtube-канале</div> <div class="otziv_step-loc_num">2</div> </div> <div class="otziv_step2-video"> <iframe width="270px" height="190px" src="https://www.youtube.com/embed/UwtqfCbWDo4" frameborder="0" allowfullscreen></iframe> <div class="otziv_step2-video_text-wr"> <div class="otziv_step2-video_text">Модель квадроцикла (пример: Отзыв о квадроцикле Avantis mirage 8)</div> <a href="#" class="otziv_step2-video_subscribe"><i class="otziv_icon-yt"></i>Подписаться</a> </div> </div> <div class="otziv_step2-text"> <div class="otziv_step-text-title">2. Опубликовать видео на Вашем канале youtube с подписью: </div> <div class="otziv_step-text-item">Название видео:</div> <div class="otziv_step-text-item">- Модель квадроцикла (пример: Отзыв о квадроцикле Avantis Mirage 8)</div> <div class="otziv_step-text-item">Описание видео:</div> <div class="otziv_step-text-item">- название квадроцикла (квадроцикл Avantis Mirage 8)</div> <div class="otziv_step-text-item">- ссылка на наш сайт: http://www.avantsb.ru</div> <div class="otziv_step-text-item">- ссылка на наш канал на youtube: https://www.youtube.com/user/MyAvantis»</div> </div> </div> <div class="otziv_block otziv_step3"> <div class="otziv_step-loc otziv_step3-loc_pos"> <div class="otziv_step-loc_text">Запиши видео о <br />квадроцикле Avantis</div> <div class="otziv_step-loc_num">3</div> </div> <div class="otziv_step3-text"> <div class="otziv_step3-item">3. Отправить ссылку на видео нам на почту <br /><br />* Сертификат может быть использован только один раз. Он не подлежит возврату и обмену на деньги ни полностью, ни частично. Разница суммы, оставшаяся после покупки, не возвращается. Если стоимость выбранных товаров выше номинала сертификата, разницу нужно доплатить .</div> </div> <div class="otziv_step3-email-wr"> <div class="otziv_step3-email">otzyv@avantismotors.ru</div> <img src="img/img-3.png" alt="" class="otziv_step3-email-icon"> </div> </div> <div class="otziv_block otziv_get-gift"> Получи подарок </div> <div class="otziv_forma-wr"> <form action="#" class="otziv_forma clearfix"> <input type="text" placeholder="Имя" class="otziv_forma-input"> <input type="text" pattern="\d [0-9]" placeholder="Телефон" class="otziv_forma-input"> <input type="text" placeholder="E-mail" class="otziv_forma-input"> <input type="text" placeholder="Ссылка на видео" class="otziv_forma-input"> <button class="otziv_forma-button">Отправить</button> </form> </div> </div> </div> </body> </html>

Well, I have about the same story, absolutely does not work out the media request (as you have on the second screen), but I have a meta viewport and moreover I copied it to insert it into the sample question.
@ConstantineShibaev to understand what the reason is simply not on bare html but on your site add a simple div with a unique class and give it these styles.
According to your advice, I also tested, but the result is identical, the styles through media queries simply do not apply (as if they were not there at all).
A little later, I will lay out my code so that you can see it more clearly.
@ConstantineShibaev and are you sure that your browser accepted your changes?
By the way, the cap from the current example is completely from my document, so there are no other meta tags there.

What are the reasons why copper queries may not work?

1 answer 1

More articles: