CSS media queries to hide and show page elements .

Question

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).

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.

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.

Here is the piece of CSS code that seems to cause some issues:

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

With this code commented out, those two lines of text won't disappear until the window (device?) width is somewhere around 320px.

Here is the entire 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) {}

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.

Answer 1

You have way to many media queries, the most you should have is three one for tablet, tablet landscape and mobile. Typically like this,

CSS

/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {



}

/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {



}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {



}

Answer 2

The css code for portrait and landscape:

@media screen and (orientation:portrait) {
/* Style for portrait mode goes here */
}

@media screen and (orientation:landscape) {
  /* Style for landscape mode goes here */
}

Or, as written by Mitch Layzell, you can use this:

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
/** Mobile **/
}


@media only screen and (min-width : 768px) and (max-width : 1024px) {

}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/** Tablet **/
}

If you want you can insert "(orientation : landscape)" and "max-width" or "max-width-device" together.