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
Alex Lohr2y 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.
Bersaelor
Bersaelor2y 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
Bersaelor
Bersaelor2y 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&#39;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 ...