title: Fixing absolute positioning in Android
body: <p>I have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE? </p>
  
  <p><a href="http://heavensgatewinery.ca" rel="nofollow noreferrer">Here is my website</a> and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.</p>
  
  <p><img src="https://i.stack.imgur.com/1Yhiv.png" alt="enter image description here"></p>
  
  <p>Now I realize why this is happening, it's because they are both absolutely positioned and obviously the <code>margin-left</code> is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers. </p>
  
  <pre><code>    #site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
  
  #banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
  #fff; border: 1px solid #b4b4b4; }
  
  
  
  &lt;h1 id="site-title"&gt;&lt;span&gt;&lt;a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home"&gt;Heavens Gate Winery&lt;/a&gt;&lt;/span&gt;&lt;/h1&gt;
  
      &lt;div id="banner"&gt;
      &lt;img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated. </p>