PDA

View Full Version : Site will not scroll.


gigiloumill
02-07-2012, 12:49 PM
Guys, I'm trying to create a site for mobile phones, but I have a little problem I can't figure out. If I include overflow:hidden;/*important*/ in the body div, the site will not scroll up and down in a phone. If I remove or add overflow:auto, it will, but then the site will move left to right. All the other pages work fine with the overflow:hidden, but the front, landing page. Can someone tell me what I'm missing please. Here's the code. Thanks
body {
width:100%;
overflow:hidden;
padding:0;
border:0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

a {
border:none;
}

img {
border-style: none;
}
.fb-like {
width:320px;
margin-right: auto;
margin-left: auto;
}
#fbtophead h1{
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-size:14px;
padding:0; border:0;
margin:0px;
}
#fbhead {
width:320px;
height:600px;
background-image: url(../images/fbmain.png);
background-repeat:no-repeat;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
margin-right: auto;
margin-left: auto;
}
#header {
height: 40px;
text-transform: uppercase;
margin-top: 85px;
margin-right: auto;
margin-left: auto;
padding:0;
border:0;
width: 320px;
}
#header a {
font-family: brandon-grotesque-1, brandon-grotesque-2, sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.03em;
padding: 6px 4px 3px 4px;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
}
#header a:hover {
color:#F00;
}
#header ul {
float: left;
padding: 0px;

margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
}
#header ul li {
float: left;
margin: 10 14px;
padding-left:10px;
}

#bio {
width:320px;
background-image: none;
background-repeat:no-repeat;
background-color: #D2EBF8;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
.nav {
width:320px;
height: 30px;
margin-top: 85px;
padding:0;
border:0;
float: none;
margin-right: auto;
margin-left: auto;
}
ul, ol { list-style-image: none; list-style-position: outside; list-style-type: none; }

.navigation {
width:60%;
}
#btn {
height: 34px;
width: 135px;
margin-top: 385px;
border:0;
float: none;
margin-right: auto;
margin-left: 50px;
}

#bio-wrp {
padding:10px 20px 30px;
}
#fb-root {
height:45px;
padding:0;
border:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#fb-root p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#333;
}
#fb-root span {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#333;
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}



#fbhead-2 {
width:320px;
height:500px;
background-image: url(url());
background-repeat:no-repeat;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
margin-right: auto;
margin-left: auto;
background-color: #D2EBF8;
}
form {
width:270px;
position:relative;
float: none;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: none;
}

label {
width:270px;
display: block;
padding:5px 0 5px 0;
}

label span {
display: block;
font-size:10px;
font-family: "p22-underground-1","p22-underground-2", century gothic, futura;
text-transform: uppercase;
float:left;
width:40px;
text-align:right;
padding:12px 20px 0 0;
}

input {
padding:10px 10px;
width:120px;
border: 1px double #171717;
}

textarea {
resize: none;
padding:7px 7px;
width:160px;
border: 1px double #171717;
overflow:hidden;
height:100px;
}

.button {
margin:5px 0;
padding:7px 0 6px 0;
letter-spacing: 1px;
border:0px;
position: relative;
top:10px;
left:56px;
width:80px;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-family: "p22-underground-1", "p22-underground-2", "century gothic", futura;
background-color: #416CB6;
color: #FFF;
}

.button:hover {
opacity: .8;
-webkit-transition: .3s;
-moz-transition: .3s;
}

#content {
width:320px;

background-repeat:no-repeat;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
}
#place {
width:320px;
background-image: none;
background-repeat:no-repeat;
background-color: #D2EBF8;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
overflow:hidden;/*important*/
margin-right: auto;
margin-left: auto;
}

#thankyou {
width:229px;
height:200px;
background-repeat:no-repeat;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
background-image: url();
margin-right: auto;
margin-left: auto;
}

#site-featured-project {
width:274px;
overflow:hidden;
clear:both;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#site-featured-images {

width:274px;
position:relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
#fbhead-3 {
width:320px;
height:300px;
background-image: url();
background-repeat:no-repeat;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
margin-right: auto;
margin-left: auto;
}

You can also click on www.hisandhersautorepair.com on your phone to see what I'm talking about.

Corrosive
02-07-2012, 04:20 PM
Scrolls fine on my Blackberry.

gigiloumill
02-07-2012, 05:18 PM
Now, i got it. tx

mohanraaj
02-22-2012, 01:44 AM
can you share it here...

may be it will help us when we face the same kind of problem in future....

gigiloumill
02-22-2012, 10:32 AM
I was trying to add a Facebook like button and somehow it kept getting in the way. I removed it and started working. But, I never found out why it did that.