title: How to hide image if screen size is less than 480px (iPhone 4)?
body: <p>I have a popup image that shows up on our homepage, But i want to hide it if a viewer is visiting our website from a mobile device (such as an iPhone 4), simply because the image is to big for the phone, without having to zoom out. Here is my code:</p>
  
  <pre><code>&lt;div class="gamedayad"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        function openColorBox(){
          $.colorbox({href: "image url"});
        }
  
        function countDown(){
          seconds--
          $("#seconds").text(seconds);
          if (seconds === 0){
            openColorBox();
            clearInterval(i);
          }
        }
  
        var seconds = 5,
            i = setInterval(countDown, 0);
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS i have (idk if it is correct) is:</p>
  
  <pre><code>@media screen and (max-width: 480px) {
      .gamedayad {
          display: hidden !important;
      }
  }
  </code></pre>
  
  <p>Please help? Thanks!</p>