breakpoints don't make sense?

[leeoniya]

hey @devlint

the existing breakpoints (which use max-width) don't make too much sense to me.

for example, an iphone 5 has a res of 320 x 568. if a user rotates the phone to gain almost 2x the screen width, there's no additional content that can become visible. the breakpoints that exist in gridlex are actually designed for min-width media rules.

what i had to do is override the existing breakpoints to subtract 1px from each of them to get the responsive behavior that users would expect from changing device orientations:

$gl-mq-list: (
  lg: "screen and (max-width: 1279px)", // 80em - 1px
  md: "screen and (max-width: 1023px)", // 64em - 1px
  sm: "screen and (max-width: 767px)", // 48em - 1px
  xs: "screen and (max-width: 567px)" // 35.5em - 1px
) !default;

sadly, i don't think it's possible to stick with ems without using non-intuitive awkward decimals.

[gwerty]

I agree they could be better.

@devlint I have to ask: isn't it possible to change the breakpoint behavior from max-width with min-width? We could then be developing mobile first...

Or is Gridlex built 'upside down' internally in that sense?

[leeoniya]

honestly, i prefer max-width (mobile last). i never understood the whole mobile-first mantra.

you design a site with all the content first, then selectively hide stuff on smaller screens; it doesnt work bottom-up - starting with a 320px layout and injecting addl content on tablet/desktop.

[neolao]

The problem is the new $gl-mq-list, we cannot choose between max-width and min-width

[devlint]

Hello @neolao, You have the possibility to change it with version 2.6.1 via $gl-mq-width: 'max-width';