Bootstrap Supersized JQuery Error Mobile Device Layout

Question

I am having a probably very simple problem. I am using Twitter Boostrap as a framework to develop some landing pages as well as Supersized Jquery Slider within the header of my site. The problem occurs when the website is viewed on a mobile device or when the browser windows is shrunk.

Supersized seems to take over the content background of the website and run in full screen with the content displaying over the top of it. I ideally would like the Supersized Slider to stay within the header and not expand down the sides of the content when viewed by mobile devices.

It is probably something quite simple however I would greatly appreciate any help! :)

URL: http://www.landing.xeonweb.com.au/index2.html

Header CSS:

.header{
width:100%;
height:700px;
clear:both;
overflow:hidden;
}

Supersized CSS:

    * { margin:0; padding:0; }
body { background:#111; height:100%; }
    img { border:none; }

    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

    #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
        #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
            #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
            #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/

        #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
        #supersized a { width:100%; height:100%; display:block; }
            #supersized li.prevslide { z-index:-20; }
            #supersized li.activeslide { z-index:-10; }
            #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
                #supersized li.image-loading img{ visibility:hidden; }
            #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

The HTML Setup:

<div class="row">   
    <div id="top-message">
        <p>Contact Us Today for our Monthly Special</p> 
    </div>  
 </div>  

 <div class="row">   
    <div class="header">
        <!--Arrow Navigation-->
            <a id="prevslide" class="load-item"></a>
            <a id="nextslide" class="load-item"></a>
        <!--Slide captions displayed here-->
            <div id="slidecaption"></div>
    </div><!--End Header-->
 </div><!--End Row-->

Answer 1

@media (max-width: 480px) {
 #supersized img {
 height: auto!important;
 }
}