Susy at-breakpoint not breaking at intended points

Question

I am learning Susy and I am trying to use at-breakpoint and running into some weirdness.

I posted a gist and it's also on sassmeister:

http://sassmeister.com/gist/7050948

https://gist.github.com/keithhayden/7050948

I defined some variables for my media layouts:

$susy-phone-wide:       24em 8       // 384px
$susy-tablet-portrait:  30em 12      // 480px to 600px
$susy-tablet-landscape: 37.5em 16    // 600px to 768px
$susy-computer:         48em 24      // 768px to ?

Then just to see where the breakpoints are taking effect, I just have a div that changes color at each breakpoint. The problem is, it's changing color at the wrong breakpoints.

• should turn green at 384px, doesn't change until 480px ( -96px )
• should turn yellow at 480px, doesn't change until 600px ( -120px )
• should turn red at 600px, doesn't change until 750px ( -150px )
• should turn purple at 768px, doesn't change until 960px ( -192px )

perhaps my math is off on the em values for the media-layouts. I used pxtoem.com to calculate the em values.

The actual practical use case is I'll be adding buttons that on mobile devices will be arranged top to bottom and width 100%, but once on a non-mobile device, they become width auto and are arranged right to left.

Answer 1

I checked it out on Ubuntu in Chrome 26 and it also seemed totally fine. But then I played around with the preferences a little in chrome://settings , where (if you show advanced settings) under

Web Content

I had set this:

• Font size: medium
• Page Zoom: 100%

If I changed the font to Large the page started behaving the way you experience it.

So this will happen no matter what if using relative units in media queries. If the browser overrides the base for the unit. You can change just the media queries to px and use relative units on the rest of the design ... I am not sure how this will affect your grid solution ... but it would get rid of this behavior.

However, when changing the font to large in the browser or zooming-in the viewport starts emulating a smaller device ... so basically, the behavior you get originally is correct (you just shouldn't look at the actual pixels anymore). And if I would zoom-in (or set the em base huge) enough I would get the buttons arranged top-to-bottom ... because my screen width to font ( em -base) ratio would be similar to one on a handheld device.

Answer 2

Since I've had several people tell me all is right for them, I assume the issue is on my end. I have noticed that on my Ubuntu machine the fonts on some sites seem to be a little taller and wider and sometimes wrap when they don't on other systems. browser is not zoomed in, so I need to ask a question in an ubuntu forum I guess.