Problem with CSS for mobile website

Question

Hi guys,

I am building this mobile website.

If you check it on your mobile browser it should fit in such that there is no horizontal scrolling. (Content should only be vertically stacked). Can someone help me in fixing the CSS of the page. Just let me know what the correct CSS should be so as to auto adjust for different mobile phones.

CSS of this page can be found here. Basically, two main components I guess. (body and content).

Also, I used this mobile website as a sample. Please refer to its inline CSS by viewing the source of that page.

Thanks

Answer 1

Okay, so it seems that your #content div is actually pushing the boundaries of the screen even on my large firefox browser. In your CSS you have it declared like so:

#content{
    width:100%;
    margin: 0;
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

I have confirmed by editing the CSS locally, that your padding is actually pushing the boundaries of the 100% width div, but the good news is that since it's a block level element it already fills all of the room available to it. Try get rid of the "width:100%;" and see if that works for you. It will still display exactly the same, but without those scroll bars.

So something like this:

#content{
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}