[IGN-3642] Breakpoint Based on Height

Is it possible to predicate the switching of a breakpoint based on the height of the container instead of the width? Being able to nest a “height-mode” breakpoint and a “width-mode” breakpoint would really go a long way toward making extremely responsive apps. Industrial monitors come in a variety of shapes and sizes, and so having a way to dynamically swap between long and wide views sounds really useful. Does anyone have experience with implementing something like this?

We have an open feature request for exactly this functionality, but it’s been dormant for quite some time. I left a note that it’s been requested again. To my knowledge, there is no workaround at this time.

you could create a media querry in the theme.css and link it with a style.
something like:

@media max-height: 600px {
  .psc-StyleName {
    display: none;
  }
}

i guess if you made 2 of these and made one do the opposite of the other to make one container visible and the other not…

Is there a way I can make the “breakpoint” variable in that example? Otherwise I would need to create one style per instance of a different sized breakpoint.

no not really, you shouldnt need that many media querys tho, some basic percent/flex should cover most needs untill a certain point i guess