I have a website with a fairly basic layout that is aligning left in smart phones - or at least in the iPhone. If anyone has any idea how to remedy this then I'd HUGELY appreciate it!
These are the styles:
body {
background-color: #e7e7e7;
}
#header {
height: 150px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
#header_inner {
height: 150px;
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#content {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#footer {
background-color: #00703c;
width: 100%;
padding-bottom: 10px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
}
#footer_inner {
width: 980px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
color: #FFFFFF;
}
This is the HTML layout:
<body>
<div id="header">
<div id="header_inner"></div>
</div>
<div id="content"></div>
<div id="footer">
<div id="footer_inner"></div>
</div>
</body>
Displayed on the computer, the content section is perfectly centered with the gray body background on either side. In a smart phone (iPhone) the content butts up against the left side of the screen, and everything is cut short on the left.
Any ideas why?
