Soy un poco nuevo en la codificación con consultas de medios, y creo que me he metido en un rincón, usando demasiadas consultas de medios (y probablemente de la manera incorrecta).

Lo que quiero hacer es ocultar algunos elementos de la página cuando el ancho de la pantalla o el dispositivo es menor que 481px. Por lo tanto, en la captura de pantalla a continuación, puede ver un par de líneas de texto en la esquina superior derecha.

Mi problema tiene que ver con las consultas de medios que he usado. Estoy al final del ingenio para descubrir (1) por qué los elementos de la página (esas dos líneas de texto en la esquina superior derecha) no desaparecen cuando la página es más pequeña que 481px O (2) por qué no aparecen en una pantalla más grande / tamaños de dispositivos cuando logro que desaparezcan los elementos de la página.

Aquí está la pieza de código CSS que parece causar algunos problemas:

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

Con este código comentado, esas dos líneas de texto no desaparecerán hasta que el ancho de la ventana (¿dispositivo?) Esté alrededor de 320px.

Aquí está todo el 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) {}

Estoy utilizando GroundworkCSS por debajo, pero he agregado algunas consultas de medios, lo más probable es que no haya sido un acto ilustrado en mi nombre. Entonces, si alguien pudiera señalarme en la dirección correcta, estaría muy agradecido. Gracias.