Incorrect width on iPad - css

Question

After starting work for a new company, I've been charged with building a new site for them. This is what I've got so far:
http://ghostevolution.com/ghostds/
The problem is that it isn't working correctly on the iPad - the header background colour doesn't stretch across the full width of the screen like it is meant to - this is also true of the mid-section light-grey background colour on pages such as http://ghostevolution.com/ghostds/?page_id=160
Does anyone know why this is? Thank you.

Answer 1

The half-assed proper way to do this is to wrap your contents in a container that spans 100% of the screen width. For example:
CSS
.wrapper {
display: block;
width: 100%;
padding: 10px 0; /* add some top + bottom padding */
background-color: #252525;
}
.aligner {
display: block;
width: 960px;
margin: 0 auto;
}
.container {
display: inline-block;
}
HTML
<div class="wrapper">
<div class="aligner">
<div class="container">
// stuff
</div><!-- /container -->
</div><!-- /aligner -->
</div><!-- /wrapper -->
It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color).
Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...
Another alternative is to start using #media queries, which would allow you to essentially plug in code for specific screen widths (880/1024px for iPad, portrait/landscape).
#media screen and (max-width: 880px) {
.my_element {
/* attributes */
}
}

Answer 2

This is due to issue that is often forgotten (in desktop browsers as well). I'm pretty sure..
You see, with any desktop browser. Change the width of the window less than your wrapper width and scroll to the right. That would show the page as cut off.
This can be fixed quite easily.
removed csspivot site since its no longer running
The basic idea is to add the same background that gets cut off into element that has fixed width since browser can't do anything to that.
Add CSS:
#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}
#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}