title: When I make the browser width smaller, text gets pushed off the page, and eventually disappears
body: <p>Whenever I make the browser width smaller, text disappears. I want the text to stay visible, even when the browser is smaller. Any tips on how to accomplish this. I tried all major browsers and is the same.</p>
  
  <p>demo: <a href="http://jsfiddle.net/J8fjV/1/" rel="nofollow">http://jsfiddle.net/J8fjV/1/</a>  </p>
  
  <p>My CSS</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  html, body {
  height : 100%;
  min-height : 100%;
  } 
   body {
  background : url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYldxqtANJ0BbLtSBtGQfhKHBZhtJYUDvsAFl0vbKs4USP) center center no-repeat fixed #000000;
  } 
     #wrapper {
      margin: 0 auto;
      width:50%;
  }
  #footer {
       position: absolute;
       bottom: 0;
       margin-left: 12.5%;
       width: 50%;
       background-color:#000000;
       height:30px;
  }
  body {color:white;}
  body { font-family: 'Noto Sans', Verdana, sans-serif; 
         font-size: 12px; 
       }
  h1 { 
    font-family: 'Share Tech', Verdana, sans-serif; 
    font-weight: 400; 
    font-size: 12px;
  }
  #main{
       width: 100px;
       height: 100px;
      background-color: transparent;
  
      position: absolute;
      top:0;
      bottom: 100;
      left: 500;
      right: 0;
  
      margin: auto;
  }
     &lt;/style&gt;
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;body style="overflow:hidden; margin:0"&gt; 
      &lt;div id="wrapper"&gt;   
      &lt;div id="footer"&gt;&lt;h1&gt;Text here&lt;/h1&gt;    &lt;/div&gt;
  &lt;/div&gt; 
  
  
  &lt;div id="main"&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>