This section sets breakpoints at (max-width: 500px), (min-width: 501px) and (max-width: 599px), and (min-width: 600px). This works under the assumption that the viewport width is always an integer number of CSS pixels, but readily breaks at strange zoom levels, common on Android and Chrome OS or merely if the user’s zoom setting is not at 100%.
The symptom is that the user can end up between breakpoints, where none of the media queries are active. I can reproduce this at 110% zoom in Chrome.
If possible, don’t set equal breakpoints at consecutive width values. Rather, set one breakpoint to override values set outside of a media query.
This section sets breakpoints at (max-width: 500px), not (max-width: 500px) and not (min-width: 600px), and (min-width: 600px). Exactly one of them should be highlighted at all zoom levels and viewport widths.
(It’s actually a nested media query; view source to see the real syntax.)
(max-width: 500px) we will be able to write (width <= 500px) — and crucially, the corresponding (width > 500px).