Нашел несложный PSD-макет, сначала сверстал его фиксированным, потом сделал адаптивным (media queries). Проверяю сайт в Хроме с помощью такого приложения Window Resizer - Chrome Web Store В Хроме вижу все как надо, а в телефонах по-разному.
Помогите понять, правильно ли сверстано и в чем косяки, если имеются.
Страница: http://dmink.ru/colors/
Скриншот, так я вижу в Хроме при ширине экрана 320рх: 
HTML
<body>
<div class="wrapper-container">
<header>
<nav>
<ul>
<li><a href="#products">The Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div class="page-heading">
<h1>join the colors.</h1>
<p>There are only 3 colors, 10 digits</p>
<a class="button" href="#joinnow">join now</a>
</div>
</header>
<section>
<div class="container-description">
<h2>There are only 3 colors, 10 digits</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
<section>
<ul>
<li>
<h3>SEO Optimized</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#seo"></a>
</li>
<li>
<h3>Responsive</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#responsive"></a>
</li>
<li>
<h3>Cloud Services</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#cloudservices"></a>
</li>
</ul>
</section>
<section>
<div class="view-more">
<p>Music is all of a sudden much<br> more <span>colorful.</span></p>
<a class="button" href="#viewmore">View more</a>
</div>
</section>
<footer>
<p>Copyright © 2015 CSS Author</p>
</footer>
</div>
</body>
CSS
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 32px;
color: white;
}
.wrapper-container {
width: 1259px;
margin: 0 auto;
}
a {
text-decoration: none;
}
header {
position: relative;
height: 495px;
margin: 0;
padding: 0;
background: url("../colors/logo.png") no-repeat 135px 17px,
url("../colors/bg-header-left.png") no-repeat 0 0,
url("../colors/bg-header-right.png") no-repeat 100% 245px,
#f74c55;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 25px 115px 0 0;
}
nav li {
display: inline-block;
}
nav li a {
display: block;
font-size: 1.15em;
color: white;
text-transform: uppercase;
margin-left: 10px;
padding: 10px;
}
nav li a:hover,
.button:hover {
opacity: 0.7;
}
.page-heading {
position: absolute;
top: 200px;
right: 250px;
}
h1 {
font-size: 2.86em;
font-weight: normal;
margin: 0 0 17px;
padding: 0;
}
.page-heading p {
font-size: 1.15em;
}
.button {
display: inline-block;
font-size: 1.72em;
color: white;
padding: 7px 28px;
border: 2px solid white;
border-radius: 4px;
}
section:first-of-type {
color: #404040;
background: white;
}
.container-description {
width: 68%;
margin: 0 auto;
}
h2 {
font-size: 2.15em;
font-weight: 300;
color: black;
margin: 93px 0 35px 0;
}
section:first-of-type ul {
list-style: none;
margin: 38px 0 100px 0;
padding: 0;
}
section:first-of-type li {
float: left;
width: 36px;
height: 32px;
}
section:first-of-type ul::after {
display: block;
content: "";
clear: both;
}
section:first-of-type li:hover {
opacity: 0.8;
}
section:first-of-type li:first-child {
background: #ee732f;
}
section:first-of-type li:nth-child(2) {
background: #f74c55;
}
section:first-of-type li:nth-child(3) {
background: #2d5f3b;
}
section:first-of-type li:nth-child(4) {
background: #404040;
}
section:first-of-type li:last-child {
background: #fb636b;
}
section:nth-of-type(2) ul {
list-style: none;
margin: 0;
padding: 0;
}
section:nth-of-type(2) li {
float: left;
width: 33.333%;
padding: 0 50px;
box-sizing: border-box;
}
section:nth-of-type(2)::after {
display: block;
content: "";
clear: both;
}
section:nth-of-type(2) li p {
margin: 0;
}
section:nth-of-type(2) li:first-child {
background: #404040;
}
section:nth-of-type(2) li:first-child h3 {
background: url("../colors/services-seo.png") no-repeat 0 3px;
}
section:nth-of-type(2) li:nth-child(2) {
background: #f74c55;
}
section:nth-of-type(2) li:nth-child(2) h3 {
background: url("../colors/services-responsive.png") no-repeat 0 3px;
}
section:nth-of-type(2) li:last-child {
background: #2d5f3b;
}
section:nth-of-type(2) li:last-child h3 {
background: url("../colors/services-cloud.png") no-repeat 0 5px;
}
h3 {
font-weight: normal;
font-size: 1.58em;
margin: 26px 0 0;
padding: 10px 0 10px 50px;
}
.button-services {
float: right;
width: 36px;
height: 32px;
margin: 21px 0 32px 0;
background: url("../colors/bg-button.png") no-repeat 50% 50%,
rgba(0, 0, 0, 0.3);
}
.button-services:hover {
background: url("../colors/bg-button.png") no-repeat 50% 50%,
rgba(0, 0, 0, 0.7);
}
section:last-of-type {
text-align: center;
height: 508px;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% 50%;
}
.view-more {
line-height: 63px;
text-align: center;
width: 100%;
padding-top: 120px;
}
.view-more p {
font-size: 3em;
margin: 0 0 35px 0;
}
.view-more span {
font-weight: bold;
}
footer {
font-size: 1.15em;
color: black;
text-align: center;
background: white;
}
footer p {
margin: 22px;
}
@media screen and (min-width: 1920px) {
body {
font-size: 1.5em;
line-height: 40px;
}
.wrapper-container {
width: 1899px;
}
nav ul {
margin: 25px 230px 0 0;
}
nav li a {
margin-left: 25px;
}
.page-heading {
right: 550px;
}
section:first-of-type li {
width: 54px;
height: 48px;
}
.view-more {
line-height: 85px;
padding-top: 100px;
}
}
@media screen and (min-width: 1600px) and (max-width: 1919px) {
.wrapper-container {
width: 1579px;
}
body {
font-size: 1.3em;
line-height: 40px;
}
nav ul {
margin: 25px 150px 0 0;
}
nav li a {
margin-left: 20px;
}
.page-heading {
right: 380px;
}
section:first-of-type li {
width: 43px;
height: 38px;
}
.view-more {
line-height: 80px;
padding-top: 90px;
}
}
@media screen and (min-width: 1366px) and (max-width: 1599px) {
.wrapper-container {
width: 1345px;
max-width: 1599px;
}
body {
font-size: 1.1em;
line-height: 32px;
}
nav li a {
margin-left: 15px;
}
.page-heading {
right: 280px;
}
.view-more {
line-height: 70px;
padding-top: 110px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.wrapper-container {
width: 1003px;
}
nav ul {
margin: 15px 13px 0 0;
}
nav li a {
margin-left: 10px;
}
.page-heading {
top: 130px;
right: 60px;
}
section:nth-of-type(2) li {
padding: 0 30px;
}
section:first-of-type {
height: 440px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.wrapper-container {
width: 768px;
}
body {
font-size: 0.8em;
line-height: 27px;
}
header {
height: 400px;
background: url("../colors/logo.png") no-repeat 13px 17px,
url("../colors/bg-header-left.png") no-repeat -140px 0,
url("../colors/bg-header-right.png") no-repeat 120% 245px,
#f74c55;
}
.wrapper-container {
width: 768px;
}
nav ul {
margin: 5px 3px 0 0;
}
nav li a {
margin-left: 1px;
}
.page-heading {
top: 125px;
right: 10px;
}
.container-description {
width: 83%;
}
section:first-of-type ul {
margin: 0 0 60px 0;
}
section:first-of-type li {
margin-top: 25px;
}
h2 {
margin: 50px 0 20px 0;
}
section:nth-of-type(2) li {
padding: 0 20px;
}
h3 {
margin: 20px 0 0;
}
.button-services {
margin: 5px 0 15px 0;
}
section:last-of-type {
text-align: center;
height: 460px;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% -50px;
}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
.wrapper-container {
width: 480px;
}
body {
font-size: 0.8em;
line-height: 25px;
}
header {
font-weight: bold;
height: 280px;
background: url("../colors/logo.png") no-repeat 13px 17px,
url("../colors/bg-header-left.png") no-repeat -140px 0,
url("../colors/bg-header-right.png") no-repeat 120% 245px,
#f74c55;
}
header p {
font-weight: normal;
}
nav ul {
font-size: 0.75em;
margin: 5px 3px 0 0;
}
.page-heading {
top: 100px;
right: 30px;
}
.container-description {
width: 92%;
}
section:first-of-type ul {
margin: 0 0 30px 0;
}
section:first-of-type li {
margin-top: 15px;
}
h2 {
margin: 30px 0 20px 0;
}
section:nth-of-type(2) li {
float: none;
display: block;
width: 100%;
padding: 0 10px;
}
section:nth-of-type(2) li::after {
display: block;
content: "";
clear: both;
}
section:nth-of-type(2) li:first-child h3 {
background: url("../colors/services-seo.png") no-repeat 0 5px;
}
section:nth-of-type(2) li:nth-child(2) h3 {
background: url("../colors/services-responsive.png") no-repeat 0 5px;
}
section:nth-of-type(2) li:last-child h3 {
background: url("../colors/services-cloud.png") no-repeat 0 11px;
}
h3 {
margin: 0;
padding: 15px 0 10px 50px;
}
.button-services {
margin: 5px 0 10px 0;
}
section:last-of-type {
height: 340px;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% -80px;
}
.view-more {
font-size: 0.7em;
line-height: 50px;
padding-top: 45px;
}
}
@media screen and (min-width: 320px) and (max-width: 479px) {
.wrapper-container {
width: 320px;
}
body {
font-size: 0.8em;
line-height: 25px;
}
header {
font-weight: bold;
height: 280px;
background: url("../colors/logo.png") no-repeat 8px 12px,
url("../colors/bg-header-left.png") no-repeat -140px 0,
url("../colors/bg-header-right.png") no-repeat 120% 245px,
#f74c55;
}
header p {
font-weight: normal;
}
nav ul {
margin: 70px 0 0 0;
}
nav li a {
margin: 0;
padding: 6px;
}
.page-heading {
top: 135px;
right: 45px;
}
.container-description {
width: 92%;
}
section:first-of-type ul {
margin: 0 0 25px 0;
}
section:first-of-type li {
margin-top: 15px;
}
h2 {
line-height: 32px;
margin: 30px 0 20px 0;
}
section:nth-of-type(2) li {
float: none;
display: block;
width: 100%;
padding: 0 10px;
}
section:nth-of-type(2) li::after {
display: block;
content: "";
clear: both;
}
section:nth-of-type(2) li:first-child h3 {
background: url("../colors/services-seo.png") no-repeat 0 5px;
}
section:nth-of-type(2) li:nth-child(2) h3 {
background: url("../colors/services-responsive.png") no-repeat 0 5px;
}
section:nth-of-type(2) li:last-child h3 {
background: url("../colors/services-cloud.png") no-repeat 0 11px;
}
h3 {
margin: 0;
padding: 15px 0 10px 50px;
}
.button-services {
margin: 5px 0 10px 0;
}
section:last-of-type {
height: 340px;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% -80px;
}
.view-more {
font-size: 0.7em;
line-height: 50px;
padding-top: 38px;
}
}