How to disable or hide a banner in certain screen sized mobile phones?

Question

I want to disable or hide a banner in certain screen sized mobile phones. For example, I don't want iPhone 4 users to see the banner, but iPhone 6 users should. How can I do it with CSS or JavaScript?

Answer 1

Ok I'm assuming you just want your site to react to different screen sizes. and if you are asking if theres a way for a site to detect which Iphone type your using...for all general purposes I believe that to be impossible.(I'm sure theres a way to use XML)

Anyway back to making your banner responsive, you should use media queries. Heres an example.

@media (max-width: 500px) {

  #visible {

    display: none;

  }
  
 

}

<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>

Ok first make the @media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width.

@media (max-width: 1000px) {
  h1 {
    display: none;
  }
  #hidden {
    display: block;
  }
}
p {
  display: none;
}

<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>

Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.

Here is a tutorial on media queries Media Queries

EDIT: Okay I found the answer you must put the styles of your banner inside of another media query as so

@media (min-width: 1001px) {


  h1 {


    display: none;
    font-size: 3em;
    
  }


}


@media (max-width: 1000px) {


  h1 {


    display: block;
    font-size: 1.5em;
    background: blue;
  }


}

<header id="BANNER">
  <h1>Banner</h1>
  <p>Banner Content</p>
</header>

Answer 2

You can use a media query and the display property in your CSS.

@media screen and (min-device-width: 320px) and (max-device-width: 480px) { .banner { display: none; } }

Change to display: block for the widths you'd like it to appear in.