title: Media Query - display:none not working
body: <p>I've checked answers to other similar questions here but can't find a solution.</p>
  
  <p>I've created a fairly simple web page where I don't want the 'top-bar'  to display on mobile phones.</p>
  
  <p>I set up a media query to handle this but I just cannot get it to work. No doubt I'm doing something stupid.</p>
  
  <p>Hoping someone can help.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Site Title&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width" /&gt;
  
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="styles.css" media="screen" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="top-bar"&gt;
  &lt;div id="top-bar-content"&gt;
      &lt;div id="ph-contact"&gt;&lt;span style="padding-right:5px;"&gt;&lt;i class="fa fa- phone"&gt;&lt;/i&gt;&lt;/span&gt;9876 1234 | &lt;span style="padding-right:5px;"&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt;&lt;/span&gt;info@someplace.com.au&lt;/div&gt;
      &lt;div id="social-icons"&gt;
          &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
          &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
          &lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;header&gt;
  &lt;div id="header-content"&gt;
      &lt;div id="logo"&gt;&lt;img src="http://placehold.it/290x133"&gt;&lt;/div&gt;
      &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;!-- Just to temporarily give the page some height --&gt;
  &lt;div style="width:100%; height:1000px;"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
  margin:0;
  padding:0;
  border:none;
  font-family: 'Open Sans', sans-serif;
  overflow:hidden;
  }
  
  #top-bar{
  width:100%;
  height:50px;
  display:block;
  border-bottom:1px solid rgba(255, 153, 255, 0.1);
  }
  
  #top-bar-content{
  width:980px;
  margin-left:auto;
  margin-right:auto;
  padding-top:15px;
  padding-right:10px;
  }
  
  #ph-contact{
  float:left;
  font-size:14px;
  color:#F9F;
  display:block;
  }
  
  #social-icons{
  display:block;
  float:right;
  }
  
  #social-icons i{
  font-size:16px;
  margin-right:10px;
  color:#F9F;
  }
  
  header{
  width:100%;
  height:200px;
  background-color:#F9F;
  }
  
  #header-content{
  width:980px;
  margin-left:auto;
  margin-right:auto;
  }
  
  
  
  #logo{
  float:left;
  padding-top:25px;
  }
  
  #nav{
  float:right;
  padding-top:65px;
  }
  
  #nav ul{
  margin:0;
  padding:0;
  list-style-type:none;
  }
  
  #nav ul li{
  display:inline;
  margin-right:10px;
  }
  
  #nav ul li a:link{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  text-decoration:none;
  
  }
  
  /* MEDIA QUERIES */
  
  /* Smartphones (portrait and landscape) ----------- */
  
  @media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px) {
  
  #top-bar{
  display:none;
  }
  
  #top-bar-content{
  display:none !important;
  }
  
  #social-icons{
  display:none !important;
  float:none;
  }
  
  #ph-contact{
  display:none !important;
  }
  
  #nav{
  display:none !important;
  }
  
  #nav ul{
  display:none !important;
  }
  
  #nav ul li{
  display:none !important;
  }
  
  #nav ul li a:link{
  display:none !important;
  
  }
  
  }
  </code></pre>
  
  <p>(As you can see, in my desperation, I've gone berserk with display:none trying to get it to work).</p>
  
  <p>I have set up a jsFiddle at <a href="http://jsfiddle.net/Mekong/c8jbd6v9/8/" rel="nofollow">http://jsfiddle.net/Mekong/c8jbd6v9/8/</a> but I can't get the Font Awesome icons to display.</p>