title: CSS media query not working on Samsung Galaxy
body: <p>Here's the URL to my site:</p>
  
  <p><a href="http://isometricland.net/games/games.php" rel="nofollow noreferrer">http://isometricland.net/games/games.php</a></p>
  
  <p>I have these rules set by default before applying the media queries:</p>
  
  <pre><code>div#outerframe
  {position:relative;width:80em;min-height:100%;margin-left:auto;margin-right:auto;}
  div#leftframe
  {display:block;}
  div#middleframe
  {position:absolute;width:60em;min-height:100%;margin-left:15em;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
  </code></pre>
  
  <p>Then I have the following media queries (yes some are duplicates):</p>
  
  <pre><code>@media screen and (min-width: 80em)
  {
      div#outerframe
      {position:relative;width:80em;max-width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
      div#leftframe
      {display:block;}
      div#middleframe
      {position:absolute;width:60em;min-height:100%;margin-left:15em;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
  }
  @media screen and (max-width: 80em) and (min-width: 60em)
  {
      div#outerframe
      {position:relative;width:60em;max-width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
      div#leftframe
      {display:none;}
      div#middleframe
      {position:absolute;width:60em;min-height:100%;margin-left:auto;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
  }
  @media screen and (max-width: 60em)
  {
      div#outerframe
      {position:relative;width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
      div#leftframe
      {display:none;}
      div#middleframe
      {position:absolute;width:100%;min-height:100%;margin-left:auto;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
  }
  </code></pre>
  
  <p>On several Samsung Galaxy models this causes the main content of my site to disappear completely. To demonstrate, here is what my site looks like without the media queries:</p>
  
  <p><a href="https://i.stack.imgur.com/v5kLK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v5kLK.jpg" alt="without media queries"></a></p>
  
  <p>It's not perfect, but the content is there.</p>
  
  <p>And here is what it looks like with the media queries enabled:</p>
  
  <p><a href="https://i.stack.imgur.com/0JvXF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0JvXF.jpg" alt="with media queries"></a></p>
  
  <p>What is causing this? Is there a workaround? Safari, Edge, UC Browser and desktop Chrome seem to render the site properly.</p>
  
  <p>Thanks!</p>