Hiding div on mobile below a certain screen resolution

Question

I want to hide a div on all devices with a screen resolution that is less than 1024. This is the div that adds the space after 3 images:

<div class="page-banners clearer">&nbsp;</div>

And this is the page:

and this is the code I am using:

@media only screen and (max-device-width :1024px)
 {
 .page-banners
 {
  display: none !important;
 }
}

What am I doing wrong?

What compelled you to use max-device-width instead of max-width? — nimsrules, Jun 16 '17 at 14:37
I can't find that code anywhere on your website... (error in the filepath?) — Johannes, Jun 16 '17 at 14:45
@MichaelCoker I have actually changed that to max-width and it worked! — Shakamal, Jun 16 '17 at 15:08
@Shakamal awesome. https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width — Michael Coker, Jun 16 '17 at 15:15

score 2 · Accepted Answer · answered Jun 16 '17 at 15:21

Make sure you have a <meta> viewport tag in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Don't use !important for the style, and use max-width instead of max-device-width, like this:

@media only screen and (max-width:1024px){
  .page-banners {
    display: none;
  }
}

1 Answers1