I have this div named "container" that is supposed to be displayed when the max-width gets to 47em. This can be triggered through zooming in. It's initial display is none but in the media query i change it to display block. The problem is that even after zooming in enough to get the max-width to become 47em, it's still not displaying anything. Why is this and how can i go about fixing the problem?
Code: http://codepen.io/anon/pen/RWBJXv
html,
body {
height: 100%;
margin: 0px;
font-family: verdana, arial, helvetica, sans-serif;
}
@media (max-width: 47em) {
#container {
display: block;
}
}
div#container {
display:none;
}
div#nav {
position: relative;
width: 100%;
background: white;
box-shadow: 1px 1px 15px #888888;
}
div#logo {
border-right-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.15);
font-family: 'Myriad Pro Regular';
font-weight: normal;
color: #1E3264;
font-size: 2em;
}<body>
<div id="container">
<div id="nav">
<div id="logo">TEST</div>
</div>
</div>Your code has several problems:
First of all, div#container is a css selector with a higher specificity than #container, which you are using inside your media query, so the general rule takes precedence.
Second, make sure you always put your media-queried rules after your general rules.