rtfeldman/elm-css

Multiple media queries do not cascade

glitteringkatie opened this issue · 3 comments

glitteringkatie commented

We have the following two media queries and expect them to apply in a cascading way.

[ Css.Media.withMedia
    [ only screen
        [ minWidth (px 1)
        , maxWidth (px 800)
        ]
    ]
    [ Css.width (Css.pct 32)
     , Css.height (Css.px 100)
    ]
, Css.Media.withMedia
    [ only screen
        [ minWidth (px 1)
        , maxWidth (px 376)
        ]
    ]
    [ Css.width (Css.pct 48)
    , Css.height (Css.px 100)
    ]
]

Instead, once the smaller size is hit, the 800 styles override the 376 styles.
image

rtfeldman commented

It's been awhile since I spent time in the media queries portion of this code base, but as I recall, there are some unfortunate design constraints elsewhere which make it impossible for this to work as expected.

I believe the solution is to change the top one from minWidth (px 1) to minWidth (px 377). Let me know if that works!

  • 👍1
brookeangel commented

👍 Thanks for getting back to us and bummer about the design constraints. The suggestion does seem to work, so thanks you!

  • 🎉1
Matsemann commented

Having the same issues.
Here it works defining them in the opposite order in elm-css of what you normally would do with css media queries, then the style tag comes out with them correct.

For instance, if I define mediaQueryA and mediaQueryB in that order in elm-css, the <style>-tag it outputs contains them in the reverse order, so mediaQueryB above mediaQueryA.

This may be arbitrary, but at least it works in my case here. Just a tad annoying having to do it the opposite way of what I do when writing css. Not sure if we can depend on that order, though?

  • 👍5