Skip to content

Commit

Permalink
Use ems instead of px
Browse files Browse the repository at this point in the history
Use ems instead of pixels for media queries
  • Loading branch information
sixhours committed Aug 17, 2014
1 parent 80f086c commit 3761231
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion sass/navigation/_menus.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
display: none;
}

@media screen and (min-width: 601px) {
@media screen and (min-width: 37.5em) {

.menu-toggle {
display: none;
Expand Down
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,7 @@ a:active {
display: none;
}

@media screen and (min-width: 601px) {
@media screen and (min-width: 37.5em) {

.menu-toggle {
display: none;
Expand Down

5 comments on commit 3761231

@obenland
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ScottSmith95
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, I've been using ems in my _s theme for some time now without issue.

@emiluzelac
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Base font-size = 16px
  • Desired layout size = 601px
  • Calculation/Results 601 ÷ 16 = 37.5625em

Cool, but what happens once the font size is changed?

Since theme is using Sass, can we do this instead: http://vvv.tobiassjosten.net/css/px-to-em-with-sass/

@samikeijonen
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it 100% sure that cloudfour article issue still exists in latest browsers? I've been moving back to using pixels in media queries and haven't noticed any issues.

@emiluzelac
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like an unconfirmed bug in WebKit browser https://bugs.webkit.org/show_bug.cgi?id=41063.
This was reported 4 years ago.

Please sign in to comment.