title: Position of element different on desktop vs mobile
body: <p>So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%. </p>
  
  <p>edit: Here is a fiddle mockup of my code. <a href="https://jsfiddle.net/8f6y1pdx/1/" rel="nofollow">https://jsfiddle.net/8f6y1pdx/1/</a></p>
  
  <pre><code>&lt;header&gt;
      &lt;div id = "navContainer"&gt;&lt;h1&gt;Hello&lt;/h1&gt;&lt;/div&gt;
      &lt;div id = "backgroundImage"&gt;&lt;img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"&gt;&lt;/div&gt;
  &lt;/header&gt;
  
  &lt;body&gt;
      &lt;div id = "contentOneContainer"&gt;Container one&lt;/div&gt;
      &lt;div id = "contentTwoContainer"&gt;Container two&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>html, body{
      padding: 0;
      margin: 0;
  }
  
  #navContainer{
      position: fixed;
      z-index: 0;
      width: 100%;
      background-color: black;
      color: white;
      height: 100px;
      text-align: center;
  }
  
  #backgroundImage{
      position: fixed;
      z-index: -2;
  }
  
  #backgroundImage img{
      width: 100%;
      max-width: 2560px;
  }
  
  #contentOneContainer{
      width: 100%;
      height: 500px;
      background-color: blue;
      position: relative;
      top: 417px;
      z-index: 0;
      color: white;
  }
  
  #contentTwoContainer{
      width: 100%;
      height: 250px;
      background-color: gray;
      position: relative;
      top: 417px;
      z-index: 0;
      color: white;
  }
  
  /*----------------------------------*\
    Responsive
  \*----------------------------------*/
  @media (min-width: 757px){
      #contentOneContainer{
      background-color: red;
      }
  }
  </code></pre>
  
  <p>If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows. </p>