title: CSS Media Queries n00b, How to Specify Element Height Properly?
body: <p>First, I apologize for the enormous pictures.</p>
  
  <p>I'm new to media queries. Here's how my site looks when I test in my browser and set the window width to 320px:</p>
  
  <p><img src="https://i.stack.imgur.com/HuyCj.png" alt="How It&#39;s Supposed to Look"></p>
  
  <p>That is how I want my site to appear on mobile phones. But when I load it on my iPhone, it appears like this:
  <img src="https://i.stack.imgur.com/ijZHn.jpg" alt="How It Actually Looks"></p>
  
  <p>Here is the query I am using:</p>
  
  <pre><code>@media only screen and (min-device-width : 320px) 
      and (max-device-width : 480px), 
      screen and (max-width : 850px) {
  </code></pre>
  
  <p>Obviously, this is because the width of the iphone is much greater than 320px. How do I make my site look like the first image, when the device has the resolution of the second image?</p>