title: CSS media queries to hide and show page elements .
body: <p>I'm kind of new to coding with media queries, and I think I have painted myself into a corner, using too many media queries (and probably in the wrong way).</p>
  
  <p>What I want to do is to hide some page elements when the width of the screen or device is smaller than 481px. So in the screenshot below, you might be able to see the couple of lines of text in the upper right corner.</p>
  
  <p><img src="https://i.stack.imgur.com/fF1bk.png" alt="Screenshot of Web Site&#39;s Header area"></p>
  
  <p>My problem has to do with the media queries that I've used. I am at wit's end to figure out (1) why the page elements (those two lines of text in the upper right corner) are not disappearing when the page gets smaller than 481px OR (2) why they do not appear in any larger screen/device sizes when I do manage to get the page elements to disappear.</p>
  
  <p>Here is the piece of CSS code that seems to cause some issues:</p>
  
  <pre><code>/* Smartphones (landscape) ----------- */
  @media only screen and (min-width : 321px){
     /* Hiding elements for this device * * * * * * * * * * * * * */
     /*
        .poweredBy{
           display: none;
        }
     */
   }
  </code></pre>
  
  <p>With this code commented out, those two lines of text won't disappear until the window (device?) width is somewhere around 320px.</p>
  
  <p><img src="https://i.stack.imgur.com/PRf62.png" alt="enter image description here"></p>
  
  <p>Here is the entire CSS:</p>
  
  <pre><code>/* Smartphones (portrait and landscape) ----------- */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        .poweredBy{
            display: none;
        }
      }
  
  /* Smartphones (landscape) ----------- */
      @media only screen and (min-width : 321px){
        .poweredBy{
            display: none;
        }
      }
  
  /* Smartphones (portrait) ----------- */
      @media only screen and (max-width : 320px) {
          .poweredBy{
               display: none;
          }
      }
  
  
  
  /* iPhone 4 ----------- */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
  
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
  
  
  
  /* iPads (portrait and landscape) ----------- */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
  
  /* iPads (landscape) ----------- */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
  
  /* iPads (portrait) ----------- */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
  
  /* iPad 3 ---------------- */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
  
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
  
  
  /* Desktops and laptops ----------- */
      @media only screen and (min-width : 1224px) {}
  
  /* 960px layouts ----------- */
      @media only screen and (min-width : 960px){}
  
  /* Large screens ----------- */
      @media only screen and (min-width : 1824px) {}
  </code></pre>
  
  <p>I am using GroundworkCSS underneath, but I have added a few media queries myself -- that was most likely not an enlightened act on my behalf. So if anyone could point me in the right direction, I would be most grateful. Thanks.</p>