Click here to Skip to main content
15,868,161 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
CSS
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;
}
}
CSS
* {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;

}

CSS
.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";

    }
Posted
Comments
Mohibur Rashid 5-Aug-15 1:01am    
Look up viewport

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900