0
Я сделал отзывчивый html-сайт, используя css, но когда я открываю его на своем iphone 4s, он показывает среднее разрешение, которое я устанавливал для планшетов вместо мобильного? кто-нибудь знает, что пошло не так? мой код ниже (жаль, что есть много его)отзывчивый html показывает планшетный дизайн css вместо мобильного, когда на моем iphone 4s?
@charset "utf-8";
/* CSS Document */
/* low res or phone */
@media only screen and (max-width: 799px) {
\t
\t
\t *
{
\t background-color:#eae9e9;
}
\t
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: -50px;
\t right: 10px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 5px 5px;
\t font-size:15px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.log1 a
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 0.5px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 5px 12px;
\t font-size:15px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.nav
{
\t visibility: hidden;
}
/*start menu*/
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background-color:#f7cf1c;
}
.menu {
width:100%;
margin:0px auto;
\t border-radius:3px 3px 3px 3px;
}
.menu li {
margin:0px;
list-style:none;
font-family:"Alfa Slab One";
}
.menu a {
transition:all linear 0.15s;
color:#fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t margin-right:auto;
\t margin-left:auto;
\t position:relative;
\t left:0px;
}
.menu .arrow {
font-size:15px;
line-height:0%;
\t background-color:#f7cf1c;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
\t position:relative;
\t left:50px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:218%;
padding:5px 0px;
position:absolute;
\t right:-140px;
top:100%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background-color:#f7cf1c;
\t border-radius: 0px 0px 3px 3px;
}
.sub-menu li {
display:block;
font-size:18px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
/*finish menu*/
.thumbnail
{
\t width:50%;
\t height:50%; \t
}
.topnav
{
\t margin-bottom: 10px;
}
.mobistrip
{
\t width: 200px;
\t height: 200px;
\t margin-right:auto;
\t margin-left:auto;
\t background-color:#f7cf1c;
\t position:relative;
\t left: 0px;
}
.createYearbook
{
\t position:relative;
\t top:-80px;
\t left:0px;
\t margin-right:auto;
\t margin-left:auto;
\t padding-bottom:20px;
\t width:100%;
\t height:50px;
\t font-family:"Alfa Slab One";
\t font-size: 15px;
\t font-weight:lighter;
\t text-align:center
}
.createYearbook a
{
\t color: #000;
\t margin-right:auto;
\t margin-left:auto;
\t text-decoration:none;
\t background-color:#ce542c;
\t padding: 5px 15px;
\t border-radius: 3px 3px 3px 3px;
}
.continue
{
\t position:relative;
\t left:0px;
\t top:-80px;
\t margin-right:auto;
\t margin-left:auto;
\t width:100%;
\t height:50px;
\t text-align:center;
}
.continue a
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 10px 8.5px; \t
\t border-radius: 3px 3px 3px 3px;
\t margin-right:auto;
\t margin-left:auto;
}
.undernav li
{
\t position:relative;
\t top: -150px;
\t display:inline; \t
\t height: 50px;
\t margin-right:auto;
\t margin-left:auto;
}
.ach
{
\t width:100%;
\t height:80px;
\t padding-top:10px;
\t padding-bottom:10px;
\t position:relative;
\t left:-20px;
\t top: 90px;
\t margin-right:auto;
\t margin-left:auto;
}
.ach a
{
\t margin-right:auto;
\t margin-left:auto;
\t font-family:Arial;
\t font-size:15px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding-right: 25px;
\t padding-left: 25px;
\t padding-bottom:20px;
\t border-bottom-width:8px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
}
.jumbotron
{
\t visibility: hidden; \t
\t padding: 0px;
}
/*choose size Stuff*/
.ChooseSizeA2
{
\t width:237px;
\t font-family:Arial;
\t font-size:15px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
\t position:relative;
\t bottom: 980px;
\t margin-right:auto;
\t margin-left:auto;
}
.ChooseSize
{
\t align-content:center;
\t background-color:#fff;
}
.picksize
{
\t position:relative;
\t bottom:980px;
\t margin-right:auto;
\t margin-left:auto;
}
.sizepics
{
\t padding-bottom: 10px;
}
.sizepics img
{
\t width:60%;
\t height:60%;
\t background-color:#fff;
\t border-width:6px;
\t border-color:#f7cf1c;
\t border-style:solid;
\t margin-right:auto;
\t margin-left:auto;
}
/* med res or ipad */
@media only screen and (min-width: 800px) and (max-width: 1439px) {
\t
\t
*
{
\t background-color:#eae9e9;
} \t
\t
.nav
{
\t visibility:hidden; \t
}
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: -50px;
\t right: 10px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 10px 10px;
\t font-size:20px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.log1 a
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 0.5px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 10px 20px;
\t font-size:20px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.nav
{
\t visibility: hidden;
}
/*start menu*/
ul.clearfix
{
\t background-color:#f7cf1c;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background-color:#f7cf1c;
}
.menu {
width:100%;
margin:0px auto;
\t border-radius:3px 3px 3px 3px;
}
.menu li {
margin:0px;
list-style:none;
font-family:"Alfa Slab One";
\t background-color:#f7cf1c;
}
.menu a {
transition:all linear 0.15s;
color:#fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t margin-right:auto;
\t margin-left:auto;
\t position:relative;
\t left:0px;
}
.menu .arrow {
font-size:15px;
line-height:0%;
\t background-color:#f7cf1c;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
\t position:relative;
\t left:80px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:280%;
padding:5px 0px;
position:absolute;
\t right:-218px;
top:100%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background-color:#f7cf1c;
\t border-radius: 0px 0px 3px 3px;
}
.sub-menu li {
display:block;
font-size:18px;
}
.sub-menu li a {
padding:20px 30px;
display:block;
}
/*finish menu*/
.topnav
{
\t margin-bottom: 10px;
}
.createYearbook
{
\t position:relative;
\t left:-15px;
\t bottom:90px;
\t margin-right:auto;
\t float:left;
\t padding-bottom:50px;
\t width:250px;
\t height:8px;
\t font-family:"Alfa Slab One";
\t font-size: 10px;
\t font-weight:lighter;
\t text-align:center
}
.createYearbook h1
{
\t width:260px; \t
}
.createYearbook a
{
\t color: #000;
\t text-decoration:none;
\t background-color:#ce542c;
\t padding: 10px 12px;
\t border-radius: 3px 3px 3px 3px;
}
.continue
{
\t position:relative;
\t right:17px;
\t bottom: 100px;
\t float:right;
\t margin-left:auto;
\t width:210px;
\t height:70px;
\t text-align:center;
}
.continue a
{
\t font-size:15px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 15px 11.5px; \t
\t border-radius: 3px 3px 3px 3px;
}
.continue h2
{
\t width:230px;
}
.undernav li
{
\t display:inline;
\t padding: 15px 20px; \t
\t height: 70px;
}
.ach
{
\t width:100%;
\t height:70px;
\t float:right;
\t padding-top:50px;
\t padding-bottom:0px;
\t margin-right:auto;
\t margin-left:auto;
}
.ach a
{
\t position:relative;
\t bottom: 120px;
\t right:12px;
\t font-family:Arial;
\t font-size:24px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding: 28px 10px;
\t border-bottom-width:8px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
\t margin-right:auto;
\t margin-left:auto;
}
.circlesT
{
\t visibility:hidden; \t
}
.jumbotron
{
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 150px;
background-repeat: no-repeat;
background-size: 100%;
position:relative;
top: 100px;
}
.jumbotron .container
{
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 130%;
font-family:Arial;
text-outline:#BEBEBE;
background-color:transparent;
padding-left:20%;
position:relative;
bottom:160px;
display: inline;
float: left!important;
margin-right:auto;
}
/*choose size Stuff*/
.ChooseSize
{
\t padding-top:100px;
\t align-content:center;
}
.ChooseSizeA2
{
\t width:100%;
\t font-family:Arial;
\t font-size:20px;
\t color:#4e4d4d;
\t font-weight:bold;
}
.picksize
{
\t position:relative;
\t left: -15;
\t margin-right:auto;
\t margin-left:auto;
}
.sizepics img
{
\t width:40%;
\t height:40%;
\t background-color:#fff;
\t border-width:6px;
\t border-color:#f7cf1c;
\t border-style:solid;
\t margin-right:auto;
\t margin-left:auto
}
/* high res or computer */
@media only screen and (min-width: 1440px) {
\t
.menu-wrap
{
\t visibility: hidden;
}
.bg
{
\t background-color:#fff;
}
.filler
{
\t width: 100%;
\t height: 200px;
\t background-color:#f7cf1c;
}
.fillera
{
\t padding-top:30px;
\t background-color:#fff;
}
*
{
\t background-color:#eae9e9;
}
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: 140px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 14px 10px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.reg1 a:hover
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 14px 10px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
}
.log1 a
{ \t
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 1px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 14px 20px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.log1 a:hover
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 1px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 14px 20px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
}
.list
{
\t padding-top:200px;
}
.nav{
\t padding-top:5%;
}
.nav ul {
padding-left: 0;
}
.nav a {
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
float: left!important;
margin-right: auto;
transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.nav a:hover
{
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
float: left!important;
margin-right: auto;
}
.nav li {
display: inline;
float: left!important;
margin-right: auto;
}
.hide
{
visibility: hidden; \t
}
.createYearbook
{
\t padding-top:40px;
\t width:28%;
\t height:65px;
\t font-family:"Alfa Slab One";
\t font-weight:lighter;
\t float:left;
\t text-align:left;
}
.createYearbook a
{
\t color:#f7cf1c;
\t width:100%;
\t font-size:80%;
\t padding: 10px 10px;
\t border-radius: 3px 3px 3px 3px;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
\t text-decoration:none;
}
.createYearbook a:hover
{
\t color: #fff;
\t width:100%;
\t font-size:80%;
\t background-color:#f7cf1c;
\t padding: 10px 10px;
\t border-radius: 3px 3px 3px 3px;
}
.undernav li
{
\t display:inline;
\t padding: 15px 20px; \t
\t height: 70px;
}
.ach
{
\t position:relative;
\t top:9px; \t
\t width:37.9;
\t height:70px;
\t float:right;
\t margin-left:auto;
\t padding-top:50px;
\t padding-bottom:0px;
\t background-color:transparent;
}
.ach li
{
\t background-color:transparent;
}
.ach a
{
\t font-family:Arial;
\t font-size:140%;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding: 10px 1px;
\t border-bottom-width:9px;
\t border-bottom-color:#eae9e9;
\t border-bottom-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.ach a:hover
{
\t font-family:Arial;
\t font-size:140%;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding: 28px 1px;
\t border-bottom-width:9px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
}
.ach ul
{ \t
\t width:350px;
\t height:100%;
\t position:relative;
\t bottom:6px;
\t background-color:transparent;
}
.continue
{
\t width:350px;
\t height:70px;
\t float:right!important;
\t padding-top:50px;
\t text-align:right;
}
.continue a
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t padding: 14px 10px; \t
\t border-radius: 3px 3px 3px 3px;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.continue a:hover
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 14px 10px; \t
\t border-radius: 3px 3px 3px 3px;
}
.pic img
{
\t padding-top: 8px;
\t background-color:transparent;
}
.jumbotron {
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 350px;
background-repeat: no-repeat;
background-size: 100%;
position:relative;
top: 130px;
}
.jumbotron .container {
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 3em;
font-family:"Alfa Slab One";
text-outline:#BEBEBE;
background-color:transparent;
position:relative;
bottom:107px;
padding-left:50px;
display: inline;
float: left!important;
margin-right: auto;
}
.circlesT ul
{
\t background-color:transparent!important;
\t width:100%;
\t height:200%;
\t float:left;
\t margin-right:auto;
\t margin-left:auto;
\t position:relative;
\t left:10%;
}
.circlesT li
{
\t display:inline; \t
\t background-color:transparent!important;
\t padding-left:2%;
\t padding-right:2%;
}
.circlesT
{
\t background-color:transparent!important;
\t width:100%;
\t position:relative;
\t bottom:+30%;
}
.circlesT a
{
\t background-color:transparent;
\t display:inline;
\t position:relative;
}
.a1
{
\t display:inline;
\t background-color:transparent;
\t height:20%;
}
.a1 img
{
\t width:15%;
\t height:15%;
\t background-color:transparent!important;
}
*
{
\t background-color:#eae9e9;
}
.thumbnail{
\t max-width: 360px;
margin-right: auto;
\t display:inline;
\t float: left!important;
}
.list
{
\t padding-top:200px;
}
.mobiBG
{
\t height:91px;
\t width:100%;
\t background-color:#f7cf1c;
}
/*Choose Size Stuff*/
.ChooseSize
{
\t padding-top:18%;
\t align-content:center;
\t background-color:#fff;
}
.ChooseSize h1
{
\t background-color:#fff;
}
.ChooseSizeA2
{
\t width:500px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
.picksize
{
\t width:100%;
\t background-color:#fff; \t
}
.sizepics
{
\t width:30%;
\t display:inline;
\t padding: 10px;
\t background-color:#fff;
}
.sizepics a
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#fff;
\t border-style:solid;
}
.sizepics img
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#fff;
\t border-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.sizepics img:hover
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#f7cf1c;
\t border-style:solid;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">
</head>
<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
<div class="reg1"><li class="reg"><a href="#">Register</a></li></div>
<div class="log1"><li class="login"><a href="#">Login</a></li></div>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
<nav class="menu" align="center">
<ul class="clearfix">
<li>
<a href="#" >Menu<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/firstPage.html">Yearbooks</a></li>
<li><a href="#">Leaving Cards</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">School Calendars</a></li>
<li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/TeacherLogin.html">Teachers Section</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
\t <div class="Yearbooks"><li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/firstPage.html">Yearbooks</a></li></div>
<div class="LeavingCards"><li><a href="#">Leaving Cards</a></li></div>
<div class="Mugs"><li><a href="#">Mugs</a></li></div>
<div class="SchoolCalendars"><li><a href="#">School Calendars</a></li></div>
<div class="TeacherSection"><li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/TeacherLogin.html">Teachers Section</a></li></div>
</ul>
</div>
<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1><a href="#">Create a Yearbook</a></h1>
</div>
<div class="continue">
<h2><a href="#">Continue Your Yearbook</a></h2>
</div>
<div class="ach" align="center">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">How To</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Creating a Yearbook is Easy
<br><br>
Simply Choose Your Options Below.
</h1>
</div>
<div class="circlesT">
<ul>
<div class="a1"><li>
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</li></div>
<div class="a1"><li>
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</li></div>
<div class="a1"><li>
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</li></div>
<div class="a1"><li>
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</li></div>
</ul>
</div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>
<div class="picksize" align="center">
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/chooseCover6x8.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/chooseYearGroup.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/choosecover8x8.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%"></a>
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>
Вы не закрываете медиазапросы. – Andrea