@media screen and (min-width: 30em) and (max-width: 50em) {I was wondering: why is the "min-width" declared?
I'm asking because since there is this min-width it's usually necessary to copy the declarations from a higher resolution to the lower one in order to avoid have a certain "trick" at for example 1024 and at 800, while not declaring the min-width they would be applied in cascade.
The last I noticed is the sidebar: in the 30-50 em is "collapsed" to a border that can be expanded, while when at less than 30em it appears again at full width because the block:
#menu_sidebar {
position: absolute;
left: -0.8em;
width: 6px;
min-height: 500px;
border: 1px solid #aaa;
border-radius: 4px;
background: #fff;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
z-index: 90;
}is not present in the
@media screen and (max-width: 30em) { block.
Hmm. Could try it without and see how it goes. Hadn't thought of that. I just copied standard media queries bitz from elsewhere and then started frigging around with the numbers. If it'll work just as well with less code, I'm all for it. :)