Streaming live at 10am (PST)

Big Ipad Landscape issues

Hi guys, since the landscape breakpoint isn’t release yet, I know there are a lot of issues with that. But mine is really big lol

I almost finished my website, after a lot of hours, a lot of work, and I was working finally on responsive design. Solving mobiles issues one by one like a cowboy but… Well, I use sticky position on some element on desktop with html overflow hidden and it works well. I had to set things differently on mobile and tablet cause, you have to set body to overflow hidden to disable horizontal scrolling and as you certainly know, it doesn’t work with sticky items… Anyway, I made it different on mobile and I’m super fine with it. Also I have A LOT of interactions (mouse move over an element for exemple) disabled on mobile and tablet and redesigned especially for it… And I’m suuuuper fine with the result… but … BUT … Then I rotated my Ipad in the landscape view and I figured that it applies everything like if we were on desktop so… Of course… A lot of things aren’t responsive and it sucks a lot…

I made some research before posting here, the only way seems to implement some custom CSS at the right breakpoint… But i’m not a beast dev, it would be ok if it was to set only some width or height or anything simple as it… But here it’s about trigger “this” or “this” interaction depending on breakpoint like we can do it in 2 clics on webflow… Well… Help please, I’m almost crying lol

Thanks,
Matthew

Hi Matthew,

If you post your read-only link it will help us find suggestions for you to do.

Andrew

I know people always want read-only link but in this case I don’t think there is any need to share it since it concerns a lot of generics things…

Anyway I found a solution after some research :

To solve interaction issues between Ipad/Desktop, I’m duplicating elements that trigger it and just display it or not depending of the device. I’m doing it for each element that cause issue at this moment, it’s tedious but it works so, why not. Here an exemple :

<style>
@media only screen and (max-device-width: 1366px) and (orientation: landscape) {
#scrolling-desktop {display: none;}
#scrolling-ipad {display: flex;}
}
</style> 

Weird fact : it was not targetting ONLY Ipad before I add the “device” word in “max-device-width”. Since biggest Ipad has a 1366px viewport, it’s similar to many desktop so it was a real issue. “device” seems to make the difference between Ipad and Desktop, right ? I mean, now, even if my website is under 1366px on desktop, it doesnt load these CSS, only on my Ipad and that’s great… I would just like some explanation about it :smiley: