responsive navbar stops working with "mid-width" media queries - why? - css

Question

My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)

Answer 1

max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)

Answer 2

I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}