引导程序超大JQuery错误移动设备布局

我有一个很简单的问题。我正在使用TwitterBoostrap作为一个框架来开发一些登录页面以及我的站点标题中的超大Jquery滑块。在移动设备上查看网站或缩小浏览器窗口时会出现问题

超大型似乎接管了网站的内容背景，全屏运行，内容显示在其顶部。理想情况下，我希望超大滑块保持在标题内，而不是在移动设备查看内容时向下展开

这可能很简单，但我非常感谢您的帮助！：）

网址：

标题CSS：

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

超大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设置：

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

请立即联系我们，了解我们的每月特价活动

您需要将滑块上的图像高度设置为自动。这应该可以解决这个问题。你可能想根据你想要断点的位置来调整媒体查询值。谢谢你帮我解决了Matt！我已经将它添加到我的CSS文件中，不幸的是没有任何更改。我缩小了屏幕尺寸，并查看了我的平板电脑的外观。您是否将其添加到样式表或响应式样式表的底部？

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