Media Query - Display: Nobody Works
I've checked the answers to other similar questions here, but can't seem to find a solution.
I've created a pretty simple web page where I don't want the top bar to appear on mobiles.
I've set up a media query to handle this, but I just can't seem to get it to work. No doubt I am doing something stupid.
Hope someone can help.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<div id="top-bar">
<div id="top-bar-content">
<div id="ph-contact"><span style="padding-right:5px;"><i class="fa fa- phone"></i></span>9876 1234 | <span style="padding-right:5px;"><i class="fa fa-envelope-o"></i></span>info@someplace.com.au</div>
<div id="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
</div>
</div>
</div>
<header>
<div id="header-content">
<div id="logo"><img src="http://placehold.it/290x133"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header>
<!-- Just to temporarily give the page some height -->
<div style="width:100%; height:1000px;"></div>
</body>
</html>
CSS
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;
}
}
(As you can see, in my desperation, I went crazy off the screen: no one tried to make it work).
I have installed a jsFiddle at http://jsfiddle.net/Mekong/c8jbd6v9/8/ but I cannot get the Font Awesome icons to display.
source to share
I just went to fiddle, removed everything underneath /* MEDIA QUERIES */
and entered
@media screen and (max-width: 480px) {
#top-bar {
display: none;
}
}
and it worked. So now it disappears when the browser reaches 480px. Adjust if necessary. If you need to change it again, just do another query with a different screen threshold size and it will replace that.
source to share
You are trying to put 2 media queries in one, which cannot be done, try this instead if you need two queries, if you don't just write which one you want:
@media screen and (min-width: 320px) {
#top-bar {
display: none;
}
}
@media screen and (min-width: 480px) {
#top-bar {
display: none;
}
}
You can change the minimum width to the maximum width if you like, but I personally prefer to use the minimum width measurements.
Another tip:
when hiding things just hide the parent and all children will hide by default
This way you save time and additional lines of code.
source to share