I've got a site I'm working on that I can't seem to get the media queries to work on, I've tried several
things and haven't gotten it to work for the a phone browser. I cant get my videos and images to resize, my backgrounds don't always fill the page. Any way I just want the videos and the images to resize when on a phone. Also if I rotate the mobile device the pages overlap. The site looks great on a desktop and even
looks decent on a tablet but when the phone comes in it just doesn't work.

here is what I'm working with

Code:
<!DOCTYPE html> 
<html>
<head>
<title>Mister Mistress</title>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width = device-width;">
<!-- media query css -->
<link href="http://mistermistress.com/Working/media-queries.css" rel="stylesheet" type="text/css">
</head>

<script type="Text/Javascript">
var szmvar_c=0;var szmvar_cook = document.cookie.split(";");for(szmvar_i=0;szmvar_i<szmvar_cook.length;szmvar_i++) {if(szmvar_cook[szmvar_i].match("POPUPCHECK=.*")) {var szmvar_check=new Date(); var szmvar_now=szmvar_check.getTime();szmvar_check.setTime(szmvar_cook[szmvar_i].split("=")[1]);if(szmvar_check.getTime() >= (szmvar_now)) szmvar_c=1;break;}}if(szmvar_c==0)document.write('<script src="//qs.ivwbox.de/?'+szmvars+'"></'+'script>');
</script>

<style>

body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}


* { margin: 0; padding: 0; }
.nextbutton, .backbutton { position: absolute; top: 0; height: 100%; width: 50%; }
.nextbutton { cursor: url('right.png'), e-resize; right: 0; }
.backbutton { cursor: url('left.png'), w-resize; left: 0; }

footer { z-index: 2; position: fixed; bottom: 5%; left: 50%; width: 600px; margin-left: -300px; text-align: center; }
header { z-index: 2; position: fixed; width: 100%;}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }



/* The Basic Style for all Pages */

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}



/* The Pages */

#i1 { left: 0%; 
	background-image: url(/Images/Number6PROMO.jpg);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; 
}
	#video {
	position: absolute;
	left: 5%;
	top: 187px;
	width: 429px;
	height: 350px;
	z-index: 1;
	margin-top: 5%;
	
}

a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
a {
	font-family: Verdana, Geneva, sans-serif;
}

#i0 { background-image: url(/Images/MM404page.png);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; 
	background-image: url(/Images/MakeMeSayPromo.jpg);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; }
#i3 { left: 300%; 
	background-image: url(/Images/CrestStripPromo.jpg);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; }
#i4 { left: 400%; 
	background-image: url(/Images/Spritebackground.jpg);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; }
#i5 { left: 500%; 
	background-image: url(/Images/TooSoon.jpg);
	background-attachment: fixed;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover; }


/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}



/* Animation */
/* TranslateX = Performance. Translate3D = Performance on iPad. */

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); transform: translateX(-300%); }
#a4:target .page { -webkit-transform: translateX(-400%); -moz-transform: translateX(-400%); -o-transform: translateX(-400%); transform: translateX(-400%); }
#a5:target .page { -webkit-transform: translateX(-500%); -moz-transform: translateX(-500%); -o-transform: translateX(-500%); transform: translateX(-500%); }



/* First page initial positioning - No anchor */

.page { 
-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
}


</style>


<!-- iPad -->

<script> 
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script> 
<body ontouchmove="BlockMove(event);"> 




<!-- Anchors for pseudoclass :target -->

<div id="a1">
 <div id="a2">
  <div id="a3">
   <div id="a4">
    <div id="a5">
     
      
  	 



   <!-- Can't Load Page -->

   <div id="i0" class="page">

    <h1>Woah! Update your browser this **** is old!</h1>

   </div>



   <!-- Number6 #a1 -->

   <div id="i1" class="page">

    <a href="#a5" class="backbutton"></a>
    <a href="#a2" class="nextbutton"></a>

<body>

<header>
<a href="http://mistermistress.bandcamp.com/download?enc=mp3-320&id=4094338100&ts=1354086083.2911483596&tsig=54b0b02f807a097fd3340931141ac698&type=album"><img class="displayed" src="http://mistermistress.com/Images/clickheretodownload.png" alt="Download the Smooth Hour Mix Tape"></a>
</header>

<section>
<div id="video">
<iframe style="border:8px solid #FFFFFF" width="420" height="315" src="http://www.youtube.com/embed/FSxOO_ezVrE" frameborder="0" allowfullscreen></iframe>
<br />
</section>

</body>

   </div>


   <!-- Make Me Say #a2 -->

   <div id="i2" class="page">

    <a href="#a1" class="backbutton"></a>
    <a href="#a3" class="nextbutton"></a>

<body>

<header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F59660081&show_artwork=true"></iframe>
</header>

<section>
<div id="video">
<iframe style="border:8px solid #FFFFFF" width="420" height="315" src="http://www.youtube.com/embed/KWKQi0OhaBk" frameborder="0" allowfullscreen></iframe>
<br />
</div>
</section>

</body>

   </div>



   <!-- Crest Strip #a3 -->

   <div id="i3" class="page">

    <a href="#a2" class="backbutton"></a>
    <a href="#a4" class="nextbutton"></a>

<body>

<header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F59856654&show_artwork=true"></iframe>
</header>

<section>
<div id="video">
<iframe style="border:8px solid #FFFFFF" width="420" height="315" src="http://www.youtube.com/embed/-gG0ijbv3BI" frameborder="0" allowfullscreen></iframe>
</div>
</section>

</body>

   </div>


	<!-- Sprite #a4 -->
	
	<div id="i4" class="page">
		<a href="#a3" class="backbutton"></a>
		<a href="#a5" class="nextbutton"></a>
		
<body>

<header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F58989900&show_artwork=true"></iframe>
</header>

<section>
<div id="video">
<iframe style="border:8px solid #FFFFFF" width="420" height="315" src="http://www.youtube.com/embed/wRs0e0rX38s" frameborder="0" allowfullscreen></iframe>
</div>
</section>

</body>
		
	</div>


	<!-- Too Soon #a5 -->
	
	<div id="i5" class="page">
		<a href="#a4" class="backbutton"></a>
		<a href="#a1" class="nextbutton"></a>
		
<body>

<header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F58990004&show_artwork=true"></iframe>
</header>

<section>
<div id="video">
<iframe style="border:8px solid #FFFFFF" width="420" height="315" src="http://www.youtube.com/embed/wulx41MWzm0" frameborder="0" allowfullscreen></iframe>
</div>
</section>

</body>
		
	</div>

  	</div>
   </div>
  </div>
 </div>
</div>

<!-- End Content -->


<footer>
<a href="http://mistermistress.com/Contact" class="link"> Contact | Website &copy; 2012 Mister Mistress </a>
<br />
<a href="http://snd.sc/QKPewe">SOUNDCLOUD</a>
</footer>