По каким причинам могут не работать меди запросы?

233
06 июля 2017, 00:31

Почему могут не работать медиа запросы? Делаю все как положено: сами запросы всегда идут в конце документа, написаны без ошибок @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>

Answer 1

Здесь ваш код работает, поскольку здесь на сайте добавлен <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>

READ ALSO
Выборка всех объектов из БД на страницу

Выборка всех объектов из БД на страницу

Есть несколько объектов у которых есть класс Бизнес, Эконом и КомфортЕсли выбрать в filter-class(это select) класс Бизнес, то страница result

189
Вертикальное и горизонтальное выравнивание блоков

Вертикальное и горизонтальное выравнивание блоков

Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы...

209
Как обработать событие по нажатию на кнопку?

Как обработать событие по нажатию на кнопку?

Нажимаю на кнопку и нужно обработать это событие в jquery

367