title: 100% DIV not strethcing iphone 3gs and 4
body: <p>I have been having major problems with a div that is set to 100%. it views fine on the desktop but iphones there is a gap on the right, I have tried </p>
  
  <pre><code>body
   { 
  min-width:980px;
  background-color: #fff;
  </code></pre>
  
  <p>I have tried a few other fixes i have found on the internet and it still is not working.</p>
  
  <p>I am using the idangero swiper which is the first time i have used it, so I am not sure if that is the culprit but it does show fine on the iphone, it's the div that does not.</p>
  
  <p>here is the css</p>
  
  <pre><code>    #welcome{ 
  width: 100%;
  height: 256px;
  background-color: #1e2f3f;
  }
  </code></pre>
  
  <p>This is the code for the swiper:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
        &lt;link rel="stylesheet" href="idangerous.swiper.css"&gt;
          &lt;script src="idangerous.swiper.js"&gt;&lt;/script&gt;    
  
  
          &lt;script type="text/javascript"&gt;
          /*======
          Use document ready or window load events
          For example:
          With jQuery: $(function() { ...code here... })
          Or window.onload = function() { ...code here ...}
          Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
          =======*/
  
          window.onload = function() {
            var mySwiper = new Swiper('.swiper-container',{
              //Your options here:
              mode:'horizontal',
              loop: true
              //etc..
            });  
          }
  
  
          &lt;/script&gt;
  
  
  
  
    &lt;style&gt;
  
  
    .device {
      width: 980px;
      height: 528px;
      padding: 30px 40px;
      border-radius: 20px;
      background: #111;
      border: 3px solid white;
      margin: 5px auto;
      position: relative;
      box-shadow: 0px 0px 5px #000;
      margin: 0 auto;
    }
    .device .arrow-left {
      background: url(images/arrows.png); no-repeat left top;
      position: absolute;
      left: 10px;
      top: 50%;
      margin-top: -15px;
      width: 17px;
      height: 30px;
    }
    .device .arrow-right {
      background: url(images/arrows.png) no-repeat left bottom;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -15px;
      width: 17px;
      height: 30px;
    }
    &lt;/style&gt;  
  
  
  
    &lt;/head&gt;
  
  
  
  
      &lt;body&gt;
  
  
  
  
  
  
  
  
  
    &lt;div class="device"&gt;
    &lt;a class="arrow-left" href="#"&gt;&lt;/a&gt; 
    &lt;a class="arrow-right" href="#"&gt;&lt;/a&gt;
    &lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
  
          &lt;div class="swiper-slide"&gt; 
             &lt;img src="images/slide1.png"/&gt;
          &lt;/div&gt;
  
          &lt;!--Second Slide--&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="images/slide2.jpg"/&gt;
          &lt;/div&gt;
  
          &lt;!--Third Slide--&gt;
          &lt;div class="swiper-slide"&gt; 
            &lt;a href="http://www.lbbacchus.com"&gt;&lt;img src="images/slide4.jpg" alt=""/&gt;&lt;/a&gt;        &lt;/div&gt;
          &lt;!--Etc..--&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
  
      &lt;div class="pagination"&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;script&gt;
      var mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true
      })
      $('.arrow-left').on('click', function(e){
        e.preventDefault()
        mySwiper.swipePrev()
      })
      $('.arrow-right').on('click', function(e){
        e.preventDefault()
        mySwiper.swipeNext()
      })
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks a lot guys :)</p>