I have created a website www.colddays.somee.com,the website works fine on android and desktop but on iphones/ipads the background images breaks the header and looks too zoom
also on apples/iphones i have a strange problem that it gives a bouncy scroll on right and left of the page and the website looks not fixed how to remove that: here is my code
html,body {
margin:0px;
padding:0px;
height:100%;
width:100%;
overflow-x:hidden;
max-width:100%;
}
.header {
background:url("Images/2.gif") no-repeat center center;
width:100%;
height:auto;
padding-bottom:30px;
background-attachment:scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.header {
background-attachment: scroll;
background-position:top center !important;
background-size: cover;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.header {
background-attachment: scroll;
background-position:top center !important;
background-size: cover;
background-repeat: no-repeat;
height: 500px !important;
}
}
* {margin:0px;
padding:0px;
}
#mylogo {
height:100px;
width:100px;
float:left;
}
h4 {
font:bold 25px verdana;
text-align:center;
}
.round {
height:30px;
width:30px;
float:right;
margin:0px;
padding:0px;
}
.inheader li {
text-decoration:none;
float:left;
list-style-type:none;
margin-top: 10px;
margin-bottom: 10px;
margin-left:10px;
}
.inheader {
float:left;
height:100px;
width:50%;
background-color:rgba(0,0,0,.2);
float:left;
}
.inheader ul {
float:right;
clear:left;
width:180px;
margin-top:20px;
text-align:left;
}
header nav article section aside footer {
display:block;
}
.transparent-left {
background-color:rgba(0,0,0,.4);
font:15px verdana;
color:white;
margin:10px;
padding:10px;
border-radius:5px 5px;
}
.slide-item {
height:30px;
line-height:15px;
width:200px;
background-color:rgba(0,0,0,.4);
border-top-left-radius:20px;
border-bottom-right-radius:20px;
text-align:center;
font:15px verdana;
color:black;
padding:5px;
position:absolute;
margin-top:150px;
left:-200px;
}
.slide-item a {
text-decoration:none;
color:black;
}
.slide-item a:visited {
text-decoration:none;
color:black;
}
@media (max-width:450px) {
.slide-item {
height:30px;
line-height:30px;
width:100px;
margin-top:150px;
font:12px verdana;
}
}
.slide-me {
margin:0px auto;
width:1200px;
height:50px;
}
@media (max-width:450px) {
.slide-me {
margin:0px auto;
width:450px;
}
}
.section-one {
background-color:#ebccf2;
height:auto;
}
.col-md-3 {
text-align:center;
float:left;
}
.style-img {
width:260px;
height:180px;
}
.lower-div li {
font:12px verdana;
padding:10px;
text-align:left;
list-style:none;
border-bottom:1px solid rgba(0,0,0,.2);
}
.lower-div li:before {
content:"\00BB \0020";
}
.lower-div {
float:left;
}
.vieo-size {
width:354px;
height:630px;
}
.side-bar {
font:13px verdana;
color:#534f5b;
background-color:rgba(0,0,0,.2);
}
#side-barlower ul li {
list-style:none;
text-align:left;
padding:10px;
border-bottom:1px solid rgba(0,0,0,.2);
}
#side-barlower li:before {
content:"\00BB \0020";
}