CSS media queries ein-und ausblenden von Seitenelementen .

Ich bin irgendwie neu zu codieren mit media queries, und ich denke, dass ich gemalt habe mich in eine Ecke, die Verwendung von zu vielen Medien-Anfragen (und wahrscheinlich auch in der falschen Art und Weise).

Was ich tun möchte ist ausblenden einige Elemente der Seite, wenn die Breite des Bildschirms oder das Gerät ist kleiner als 481px. Also in dem screenshot unten, Sie könnten in der Lage, um zu sehen, die paar Zeilen text in der oberen rechten Ecke.

Mein problem hat zu tun mit den media queries, die ich verwendet habe. Ich bin mit Latein am Ende, um herauszufinden, (1) warum die Bestandteile der Seite (die zwei Zeilen text in der rechten oberen Ecke) werden nicht verschwinden, wenn die Seite kleiner wird als 481px ODER (2) warum erscheinen Sie nicht in jedem größeren Bildschirm/Gerät Größen, wenn ich zu verwalten, um die Seite Elemente zu verschwinden.

Hier ist der CSS-code, der zu verursachen scheint einige Probleme:

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
   /* Hiding elements for this device * * * * * * * * * * * * * */
   /*
      .poweredBy{
         display: none;
      }
   */
 }

Mit diesem code auskommentiert, die zwei Zeilen text wird nicht verschwinden, bis das Fenster (Gerät?) Breite ist irgendwo um 320px.

Hier ist die gesamte CSS:

/* 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) {}

Ich bin mit GroundworkCSS unter, aber ich habe noch ein paar media queries mich-das war wahrscheinlich nicht in einem aufgeklärten handeln in meinem Namen. Also, wenn jemand könnte mich in die richtige Richtung wäre ich sehr dankbar. Danke.