title: slide from left menu on mobile and fixed position
body: <p>I cant replicate this problem on ordinary browsers, but its happening on mobile devices.</p>
  
  <p>Im using a facebook style slide from left menu, the home screen is then pushed over to the right, I also apply a <code>position:fixed</code> to the home screen, so I can scroll the menu on the left without moving the now pushed over home screen. </p>
  
  <p>The issue is when I do this everything on the right gets squashed, for instance the home page image which is using <code>width:100%</code> on the home screen shrinks to fit the tiny of space it has on the right hand side of the screen.
  The text all attempts to fit in the small space also.
  This only happens when the home page becomes fixed.</p>
  
  <p>It seems the <code>width:auto</code> is causing the problem.</p>
  
  <p>Here is the jquery...</p>
  
  <pre><code>$(document).ready(function() {
  $('.btn-navbar ').toggle( 
  function() {
      $('#pop-out-left').animate({ left:0 }, 100);
      $('.container').animate({ left:'87%' }, 100);
       $('.container').addClass("fixed-position");
      $('#footer').animate({ left:'87%' }, 100);
      $('#footer').addClass("display-none");
      $('#language_strip').addClass("fixed-position");
  
  }, 
  function() {
      $('#pop-out-left').animate({ left: '-87%' }, 100);
      $('.container').animate({ left: 0 }, 100);
       $('.container').removeClass("fixed-position");
      $('#footer').animate({ left: 0 }, 100);
      $('#footer').removeClass("display-none");
      $('#language_strip').removeClass("fixed-position"); 
      $(document).scrollTop(0);
  }
  );
  </code></pre>
  
  <p>The CSS...</p>
  
  <pre><code>.fixed-position {
  position:fixed !important;
  }
  
  #pop-out-left { 
  overflow:hidden;
  position:absolute; 
  width: 80%; 
  border: 1px dotted gray; 
  background: #fff; 
  color: white; 
  top:0px; 
  left: -82%; 
  height:auto;
  min-height:600px;
  padding-bottom: 00%;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.container {
  width: auto;
   }
  </code></pre>