Skip to content

Loading…

match breakpoint in theme.js #25

Closed
mrtwebdesign opened this Issue · 3 comments

2 participants

@mrtwebdesign

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. :)
-Matthew

@mrtwebdesign

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

@lancewillett

Thanks for the notes—I confirmed this in testing, but it looks to be more than just 1 pixel. Most likely due to one calculation happening in JavaScript and one in CSS, and also viewport vs. window width.

We'll continue testing it.

@lancewillett lancewillett was assigned
@lancewillett

This is a weird one. :) In Firefox the navigation acts correctly, but the main content transitions at 584 instead of 600.

@lancewillett lancewillett added a commit that referenced this issue
@lancewillett lancewillett Use matchMedia to trigger showing the small menu instead of a hard-co…
…ded width.

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+
https://developer.mozilla.org/en/DOM/window.matchMedia
http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface

References #25
234bb4c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.