Почему могут не работать медиа запросы? Делаю все как положено: сами запросы всегда идут в конце документа, написаны без ошибок @media screen and (max-width: 1200px) {}
уже даже пробовал подключать их отдельным файлом после основного. Но все равно на указанных разрешениях они не то чтобы не применяются а их в принципе нет.
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>
Здесь ваш код работает, поскольку здесь на сайте добавлен <meta name="viewport" content="width=device-width, initial-scale=1">
.
Вот два примера можете на голом html
файле посмотреть.
Первый использованием meta viewport
и с ним media
запросы работают нормально.
<style>
body{
background: black;
}
@media screen and (max-width: 500px) {
body{
background: red;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
Это скрин с viewport
А второй пример вот так, просто уберем <meta name="viewport" content="width=device-width, initial-scale=1">
, и уже media
запрос не работает.
<style>
body{
background: black;
}
@media screen and (max-width: 500px) {
body{
background: red;
}
}
</style>
А это без viewport
:
Здесь подробно описано про viewport.
Ну надо же так? ))))
Вы написали так @media screen and(max-width: 992px)
, а надо вот так @media screen and (max-width: 992px)
, пробел после 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть несколько объектов у которых есть класс Бизнес, Эконом и КомфортЕсли выбрать в filter-class(это select) класс Бизнес, то страница result
Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы...
Нажимаю на кнопку и нужно обработать это событие в jquery