How do y'all handle mobile phones in landscape for mediaquery breakpoints

So, we'm using suid/mui that has builtin-breakpoints, so we can do:

const ActiveDotPopup = styled(Box)(({ theme }) => ({
  // .. basic css
  [theme.breakpoints.down("sm")]: {
    // .. mobile specific css
  }
}))

const ActiveDotPopup = styled(Box)(({ theme }) => ({
  // .. basic css
  [theme.breakpoints.down("sm")]: {
    // .. mobile specific css
  }
}))

Which of course doesn't work when mobile phones are being held in landscape orientation. I can think of ways of manually adding

@media (min-width: 600px) and (min-height: 600px) {
  /* … */
}

@media (min-width: 600px) and (min-height: 600px) {
  /* … */
}

but I would rather use the styled-components shorthand theme.breakpoints.down("sm")] . It seems less verbose and more clear whats going on.

3 Replies

Alex Lohr•2y ago

You can also use orientation and aspect-ratio in media queries. There's also @solid-primitives/media to reactively use media queries. Maybe that helps you.

BersaelorOP•2y ago

yeah, I know, the problem is, MUI/SUID uses the breakpoints in many places, i.e. you can do

  <Grid item xs={12} sm={3}>

  <Grid item xs={12} sm={3}>

to say a grid-item should be full-width on small screens, and 1/4 of the width on larger. I'm looking for a way of modifying the xs to be not just depending on the width there's also

import { useMediaQuery } from "@suid/material";

import { useMediaQuery } from "@suid/material";

from suid/mui, but again, it would be nice if we could modify the main system breakpoints of course

@media only screen and (max-device-width: 900px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {

@media only screen and (max-device-width: 900px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {

would be a media--query I could use to distinguish phone from desktop/tablet, but then the Grid breakpoints in different places then my own defined code. I'd like to have one single source of truth

BersaelorOP•2y ago

added a discussion point over on https://github.com/swordev/suid/discussions/182 maybe the suid creator has an idea

GitHub

Adding custom breakpoint · Discussion #182 · swordev/suid

Hello, I'd like to add a custom breakpoint like: const isMobile = @media only screen and (max-width: 600px), (max-height: 600px); const xs = useMediaQuery(isMobile); // not just const xs ...

Gaming

Programming

How do y'all handle mobile phones in landscape for mediaquery breakpoints