How to fix the DOM in Mobile Safari - html

Question

I have a one page website with six sections. I would like each section to fill the entire screen or viewport (specifically an iPhone 4s). Currently, it is like each section is stacked on top of each other (this is not what I want).
HTML Tag:
<meta name="viewport" content="intial-scale = 1.0, maximum-scale = 1.0" />
HTML (only posting one section - each section is essentially the same):
<section class="container" id="music">
<div class="center">
<div class="info">
<h1 class="headline">music</h1>
<ul>
<li>Black Hour EP</li>
<li>You're Invited (Coming Soon)</li>
</ul>
</div>
</div>
</section>
CSS #media query:
#media (min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
#home{width: 100%;
background-image: url(../images/landingPage#2x.jpg);}
#navbar{display: none;}
#albumCover{width: 400px;
height: 400px;
margin-top: 175px;}
#albumCover p{font-size: 6em;
padding-top: 150px;}
#about{width: 100%;
background-image: url(../images/about#2x.jpg);}
.info{width: 500px;
height: 500px;
margin: 200px 0 0 200px;}
.headline{font-size: 3em;
margin: -20px 0 5px 0;}
.info p{padding-top: 30px;
font-size: 1em;
margin-bottom: -100px;}
#music{width: 100%;
background-image: url(../images/music#2x.jpg);}}
.info ul li{text-align: center;
font-family: eb-garamond, sans-serif;
font-size: 1.5em;
line-height: 2em;
text-transform: capitalize;}
/* Lighthouse */
iframe{width: 50%;
height: 50%;}
#close{margin: 50px 0 15px 350px;
padding: auto 5px;}
#videos{width: 100%;
background-image: url(../images/videos#2x.jpg);}}
#connect{width: 100%;
background-image: url(../images/connect#2x.jpg);}}
#contact{width: 100%;
background-image: url(../images/contact#2x.jpg);}}
#email a{font-size: .625em;}
.primeLine{font-size: 1em;}
#email li{margin: 0;}
}
Here is a screen shot of the current state: http://postimg.org/image/ya1488ebb/
Does anybody have any ideas that could help me out or get me thinking along the right track?

Answer 1

Then, I think this will solve your problem, jsFiddle.
You can add individual backgrounds to the different DIV's, margin, text, absolute elements, etc.
{
height: 300px;
width: 100%;
display: block;
float: left;
clear: none;
position: relative;
}

Answer 2

Adding a z-index to the divs along with box-shadow might provide what you're looking for in terms of the "stacked pages" effect - see this jsfiddle: http://jsfiddle.net/NZUWj/5/
.one {
height: 300px;
width: 100%;
display: block;
float: left;
clear: none;
position: relative;
z-index: 6;
background-color: red;
-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
}
In terms of images, background-image-size and other background-image properties seem pretty widely supported according to http://caniuse.com/#feat=background-img-opts, but if you're concerned about compatibility (IE 8) a javascript solution like backstretch.js might be better.
That being said, if your divs don't need to flow and always stay at 100% width, you don't need all those extra CSS properties. This format will work:
.one {
height: 300px;
width: 100%;
display: block;
background-color: red;
-webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
}
See it in a jsfiddle: http://jsfiddle.net/GEdLV/4/