title: Bootstrap Supersized JQuery Error Mobile Device Layout
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>It is probably something quite simple however I would greatly appreciate any help! :)</p>
  
  <p>URL: <a href="http://www.landing.xeonweb.com.au/index2.html" rel="nofollow">http://www.landing.xeonweb.com.au/index2.html</a></p>
  
  <p>Header CSS:</p>
  
  <pre><code>.header{
  width:100%;
  height:700px;
  clear:both;
  overflow:hidden;
  }
  </code></pre>
  
  <p>Supersized CSS:</p>
  
  <pre><code>    * { 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; }
  </code></pre>
  
  <p>The HTML Setup:</p>
  
  <pre><code>&lt;div class="row"&gt;   
      &lt;div id="top-message"&gt;
          &lt;p&gt;Contact Us Today for our Monthly Special&lt;/p&gt; 
      &lt;/div&gt;  
   &lt;/div&gt;  
  
   &lt;div class="row"&gt;   
      &lt;div class="header"&gt;
          &lt;!--Arrow Navigation--&gt;
              &lt;a id="prevslide" class="load-item"&gt;&lt;/a&gt;
              &lt;a id="nextslide" class="load-item"&gt;&lt;/a&gt;
          &lt;!--Slide captions displayed here--&gt;
              &lt;div id="slidecaption"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!--End Header--&gt;
   &lt;/div&gt;&lt;!--End Row--&gt;
  </code></pre>