How to Reset CSS after Media Query? - css

Question

I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query
#media only screen
and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.
#media only screen
and (min-width: 1282px)
{
#wrapMiddleNew { display:none; }
}

Answer 1

I just got trough your page and you have to add more query format.. this should do the trick
/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
display:block;
}
#breakNav {
display:none;
}
/* Media Query */
#media only screen and (max-width: 1282px) {
#wrapLeft, #wrapRight {
display:none;
}
#breakNav {
display:block;
}
}
#media only screen and (max-width: 900px) {
#wrapLeft, #wrapRight, #breakNav {
display:none;
}
}
So each time your window goes lower 1282px will apear if its bigger will hide....

Answer 2

Do this:
#wrapMiddleNew{
display:none;
}
#media only screen and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}

Answer 3

You don't need the second query as the first bit of css only comes into effect while the screen is less than a certain number here is a demo:
http://jsfiddle.net/Hive7/WZXM6/
CSS:
#media all and (max-width: 500px) {
.hi {
display: none;
}
}
Here is a media query tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You are targeting the wrong div your query should look like this:
#media only screen and (max-width: 1282px) {
#breakNav {
display: none;
}
}
Then remove any jquery affecting that element