match breakpoint in theme.js #25

Closed
mrtwebdesign opened this Issue Apr 27, 2012 · 3 comments

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@mrtwebdesign

mrtwebdesign Apr 29, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett May 9, 2012

Collaborator

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.

Collaborator

lancewillett commented May 9, 2012

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.

@ghost ghost assigned lancewillett May 9, 2012

@lancewillett

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett May 9, 2012

Collaborator

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

Collaborator

lancewillett commented May 9, 2012

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

lancewillett added a commit that referenced this issue May 9, 2012

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment