I am currently experiencing some difficulties with my webpage and its header layout when viewed on an iPad versus a desktop.
Upon visiting on a computer, the images and header/footer are intended to extend 100% to the edges of the screen.
However, when accessing the page on an iPad, the full width of the page is not displayed and the 100% width header is resized. My goal is for the iPad view to showcase the entire width of the page.
As I am new to optimizing for iPads, I believe there may be a small issue or rule that I am overlooking. Below is the HTML code snippet for the header:
<header>
<div id="header-wrapper">
... header content ...
</div>
</header>
<div id="page-content">
.... photos ....
</div>
and here is the corresponding CSS code:
header {
background: url('../images/header-bg.jpg') repeat-x top left;
z-index: 500;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
position: fixed;
top: 0;
width: 100%;
}
#header-wrapper {
padding: 10px;
position: relative;
}
#page-content {
margin: 0 auto;
z-index: 400;
position: relative;
margin-top: 91px;
overflow: hidden;
}
I hope this provides enough information to assist with finding a solution!