title: media query not working as expected
body: <p>why does this code make both divs appear on a landscape-oriented iPad?</p>
  
  <pre><code>/* CSS */
  
  div{
      display:none;   
  }
  @media screen and (min-width: 48em) {
    /* IPAD PORTRAIT */
    body {
        /* DARK BLUE */
     background-color:#006;
    }
      div{
      display:none;  
    }
      #ipad-portrait{
      display:block;  
    }
  }
  
  
  @media screen and (min-width: 64em) {
    /* IPAD LANDSCAPE */
    body{
        /*bright green*/
      background-color:#3f0;  
    }
  
  
    /* an attempt to hide all divs before displaying 
       the one that says iPad landscape */
    div{
      display:none;  
    }
  
  
  
    #ipad-landscape{
      display:block; 
    }
  }
  
  
  
  &lt;!-- HTML --&gt;
   &lt;div id="ipad-landscape"&gt;
   ipad landscape
   &lt;/div&gt;
  
    &lt;div id="ipad-portrait"&gt;
   ipad portrait
   &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>