Bootstrap Supersized JQuery Ошибка Формат мобильного устройства

Question

У меня есть, вероятно, очень простая проблема. Я использую Twitter Boostrap как основу для разработки некоторых целевых страниц, а также Supersized JQuery Slider в заголовке моего сайта. Проблема возникает, когда веб-сайт просматривается на мобильном устройстве или когда окна браузера сокращаются.

Supersized, похоже, берет на себя содержание веб-сайта и запускается в полноэкранном режиме с отображением содержимого поверх него. В идеале я бы хотел, чтобы Supersized Slider оставался внутри заголовка, а не расширялся по сторонам контента при просмотре мобильными устройствами.

Возможно, это что-то очень простое, но я бы очень признателен за любую помощь! :)

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

Заголовок 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; } 

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; 
} 
}