I'm playing around customizing the theme.
The CSS breaks at 600/601 (min-width: 600px)
but the menu breaks at 599/600 ( < 600px)
Setting the width to 601 in theme.js keeps the transition at 600 from looking a little crazy.
If someone happens to resize their browser to 600 the layout can break. It broke mine. :)
After changing some more items.. Also noticed min-width and max-width @media in various place for 600px each. This would also had to the glitching at exactly 600px. Could also create a distracting flash similar to FOUC
We'll continue testing it.
This is a weird one. :) In Firefox the navigation acts correctly, but the main content transitions at 584 instead of 600.
Use class change rather than media query to change navigation list it…
Use matchMedia to trigger showing the small menu instead of a hard-co…
This ensures the navigation and content transition to "small screen layout" at the same exact size.
Avoids mismatch between window width and actual breakpoint (15 pixel different currently).
Note: only supported in IE10+