Media Queries & JQuery

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;">  <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>  <script> function BlockMove(event) { // Tell Safari not to move the window. event.preventDefault() ; } </script> <body ontouchmove="BlockMove(event);">  <div id="a1"> <div id="a2"> <div id="a3"> <div id="a4"> <div id="a5">  <div id="i0" class="page"> <h1>Woah! Update your browser this **** is old!</h1> </div>  <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>  <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>  <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>  <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>  <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>  <footer> <a href="http://mistermistress.com/Contact" class="link"> Contact | Website © 2012 Mister Mistress </a> <br /> <a href="http://snd.sc/QKPewe">SOUNDCLOUD</a> </footer>