+mobile() not working - Githubissues

jescalan / rupture

Simple media queries in stylus

http://jescalan.github.io/rupture

MIT License

752 stars 35 forks source link

+mobile() not working #74

Open benodonohue opened 8 years ago

benodonohue commented 8 years ago

Up until today the breakpoint for +mobile() isn't working. +tablet() and +desktop() are fine.. Any ideas? I am also using jeet stack() as well as a transition ease on each element, all are working fine except on +mobile()

jescalan commented 8 years ago

We have a test in place verifying that +mobile() works, and it is still passing. It might be something else conflicting. Have you looked into the output code? Have you tried stripping down some extra styles and libraries and replicating it with a very simple example? Dig a little deeper here 😁

benodonohue commented 8 years ago

I have stripped it right back to base template and only added jeet, for edit() and stack() still nothing for +mobile() Browser in the attached image is down to mobile breakpoint.

benodonohue commented 8 years ago

And here it is using +tablet() and it works all good????

jescalan commented 8 years ago

Did you check the output in public? Did you try removing jeet? Strip it down all the way. It works, it's just a question of what's causing the issue in your case.

jjojo commented 7 years ago

I am experiencing the same problem. +tablet() works fine, and even affects widths under 400px but +mobile() wont work properly. I'm using jeet as well. otherwise love this project! thanks

jjojo commented 7 years ago

Not sure why it dosen't work tith use-device-width: false but it dosent, turning it on fixes the issue for me at least.

rupture = {
  rasterise-media-queries: rasterise-media-queries
  mobile-cutoff: 400px
  desktop-cutoff: 1050px
  hd-cutoff: 1800px
  enable-em-breakpoints: false
  base-font-size: base-font-size
  anti-overlap: false
  density-queries: 'dppx' 'webkit' 'moz' 'dpi'
  retina-density: 1.5
  use-device-width: **true**
}

benodonohue commented 7 years ago

👍