Здравствуйте. Есть несколько страниц для которых нужно сделать адаптивную верстку, но на страницах элементов немного и все они находятся в блоке который располагается по центру страницы. Вот возникла такая проблема, что одна страница отлично показывается на большинстве девайсов, а вторая которая имеет намного меньше элементов и вообще мизерную разметку как-то криво. Там в принципе нечего и адаптировать, просто прописать , но на этой странице что-то не помогает.
Привожу разметку и стили:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--Обертка всего содержимого -->
<div class="main">
<!--Верхняя надпись-заголовок -->
<div class="top-label"><img src="images/top-label.png" alt="" draggable="false"/></div>
<!--Блокнот по центру -->
<div class="note">
<!--Форма отправки значения -->
<form id="feedback-form" action="" method="post">
<span>Зібратися до навчання легко за 10 хв?</span>
<button>Так</button>
<div class="separator"></div>
<span>Собраться к учебе легко за 10 мин?</span>
<button>Да</button>
</form>
</div>
</div>
<!--Футер -->
<div class="footer">
<ul>
<li class="footer-lang"><img src="images/lang-icon.png" alt="" draggable="false"/></li>
<li class="footer-gender"><img src="images/gender-icon.png" alt="" draggable="false"/></li>
<li class="footer-cart"><img src="images/cart-icon.png" alt="" draggable="false"/></li>
<li class="footer-auto"><img src="images/auto-icon.png" alt="" draggable="false"/></li>
<li class="footer-pay"><img src="images/pay-icon.png" alt="" draggable="false"/></li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
border: none;
}
/* подключение шрифтов------------*/
@font-face {
font-family: GunnyRewritten; /* Гарнитура шрифта */
src: url(../fonts/GunnyRewritten.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
font-family: OpenSans; /* Гарнитура шрифта */
src: url(../fonts/openSans.ttf); /* Путь к файлу со шрифтом */
}
body{
background: url("../images/bg.jpg");
background-size: cover;
font-family: GunnyRewritten;
font-size: 58px;
color: #2b5f3d;
}
form{
display: table;
margin: 0 auto;
}
button{
font-family: GunnyRewritten;
text-transform: uppercase;
border: 4px dashed #ce631b;
font-size: 58px;
color: #2b5f3d;
cursor: pointer;
width: 750px;
background: none;
margin-top: 50px;
}
button:hover{
border: 4px solid #ce631b;
box-shadow: inset 0px 0px 4px 0px #ce631b;
-webkit-box-shadow: inset 0px 0px 4px 0px #ce631b;
-moz-box-shadow: inset 0px 0px 4px 0px #ce631b;
}
button:active{
background: #c25918;
color: #fff;
}
span{
margin: 0 auto;
display: table;
}
/*Верхняя обертка на всех страницах-------------*/
.main{
background: url("../images/bg-icon.png");
max-width: 1910px;
}
/*Надпись вверху первой страницы-------------*/
.top-label{
display: table;
margin: 25px auto;
}
/*Блокнот первой страницы-------------*/
.note{
background: url("../images/first-bg.png") no-repeat;
margin: 0 auto;
max-width: 1070px;
padding: 200px 0 0 0;
height: 780px;
}
.note .separator{
border-top: 2px dashed #d3c38d;
margin: 50px 0 40px -10px;
}
/*Разделитель-------------*/
.separator{
border-top: 2px dashed #d3c38d;
margin: 22px 0 0 -10px;
}
/*Футер всех страниц------------*/
.footer{
height: 128px;
max-width: 1910px;
background: url("../images/footer-bg.jpg");
clear: both;
border-top: 1px solid #73a629;
overflow: hidden;
}
.footer ul{
overflow: hidden;
margin: 0 auto;
display: table;
padding-top: 18px;
height: 72px;
vertical-align: middle;
}
.footer ul li{
background: url("../images/arrow-icon.png") no-repeat 90% 45%;
float: left;
list-style-type: none;
padding-right: 54px;
}
.footer ul li:last-child{
padding-left: 0;
background: none;
}
