CODEWITHSUNDEEP
cssmedia-queries
Mekong
Mekong

Reputation: 449

Media Query - display:none not working

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>[email protected]</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.

Upvotes: 4

Views: 21179

Answers (2)

user4157770
user4157770

Reputation:

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.

Upvotes: 1

MikaelC
MikaelC

Reputation: 408

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.

Upvotes: 4

Related Questions