Media Query - display:none not working

Question

I've checked answers to other similar questions here but can't find a solution.

I've created a fairly simple web page where I don't want the 'top-bar' to display on mobile phones.

I set up a media query to handle this but I just cannot get it to work. No doubt I'm doing something stupid.

Hoping 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've gone berserk with display:none trying to get it to work).

I have set up a jsFiddle at http://jsfiddle.net/Mekong/c8jbd6v9/8/ but I can't get the Font Awesome icons to display.

You haven't linked the external file on the fiddle, on the left pane you can add it. I did it for you http://jsfiddle.net/web_dever/c8jbd6v9/11/ — Pindo, Jul 29 '15 at 01:43
Add `` to your header. Also I usually go for max-width instead of max-device-width (http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width) — martinczerwi, Jul 29 '15 at 01:50

score 4 · Accepted Answer · answered Jul 29 '15 at 04:14

4

I just went to the fiddle, deleted everything under /* MEDIA QUERIES */ and put in

@media screen and (max-width: 480px) {
    #top-bar {
        display: none;
    }
}

and it worked. So right now it disappears when the browser hits 480px. Adjust as necessary. If you need it to change again, just do another query with the other screen threshold size and it will supersede this one.

answered Jul 29 '15 at 04:14

MikaelC

398
3
11

2

OK. Thanks GoldenBeet. All working. So my original media-query syntax was wrong. Thanks also to all those who responded. Much appreciated! – Mekong Jul 29 '15 at 06:04

score 1 · Answer 2 · answered Jul 29 '15 at 04:23

You are trying to put 2 media queries into one, that cannot be done, try this instead, if you need the two queries that is, if not 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 swap out min-width for max-width if you wish but I personally prefer using min-width measurements.

Another tip is:

when hiding things, just hide the parent element and all the children will hide by default

Thus saving you time and extra lines of code.

Media Query - display:none not working

2 Answers2