Website Not Centered In Smart Phone ..... HELP

**Ntrimgs** · 10-12-2012 04:30 PM

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:

HTML Code:

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:

HTML Code:

<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?

**GuiltyDragon** · 10-16-2012 05:44 AM

Have you managed to test it on any other phones? Do you have a site uploaded that we can look at? Just a guess, but it might be worth adding in a viewport to cope with smartphones connecting. Something like
<meta name="viewport" content="width=device-width" />
in your header might help.

Thread: Website Not Centered In Smart Phone ..... HELP

Thread Tools

Display

Website Not Centered In Smart Phone ..... HELP

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions