Jestem trochę nowy w kodowaniu z zapytaniami o media i myślę, że pomalowałem się w kąt, używając zbyt wielu zapytań o media (i prawdopodobnie w niewłaściwy sposób).

Chcę ukryć niektóre elementy strony, gdy szerokość ekranu lub urządzenia jest mniejsza niż 481 pikseli. Na poniższym zrzucie ekranu możesz zobaczyć kilka wierszy tekstu w prawym górnym rogu.

Mój problem dotyczy zapytań o media, których użyłem. Mam koniec, aby dowiedzieć się (1), dlaczego elementy strony (te dwie linie tekstu w prawym górnym rogu) nie znikają, gdy strona jest mniejsza niż 481 pikseli LUB (2), dlaczego nie pojawiają się na większym ekranie / rozmiary urządzeń, gdy uda mi się usunąć elementy strony.

Oto fragment kodu CSS, który wydaje się powodować pewne problemy:

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

Po skomentowaniu tego kodu te dwie linie tekstu nie znikną, dopóki szerokość okna (urządzenia?) Nie będzie wynosiła około 320 pikseli.

Oto cały 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) {}

Używam pod spodem GroundworkCSS, ale sam dodałem kilka zapytań o media - najprawdopodobniej nie był to akt oświecony w moim imieniu. Więc jeśli ktoś mógłby wskazać mi właściwy kierunek, byłbym bardzo wdzięczny. Dzięki.