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
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
Matthew, Cannot offer a solution from this Webflow beginner.
I have this issue with iPad in landscape and have been searching the internet for a solution. Seems like this has been a request for Webflow since 2016 regarding posts I viewed requesting iPad breakpoints.
Can you offer any instructions on how to implement? Not sure how elements that trigger the breakpoints work in the code you have above. Where is the code placed?
Most issues don’t need custom code and can be fixed just by reordering things or setting overflow hidden to the appropriate element (the body is never it).
But even if code is needed, without seeing what’s going on, is difficult (if not impossible) to help.
I’m not sure what the issue you are referring to is, but if it’s the weird horizontal scroll (I get it also on desktop) it’s solved by giving a width of 100% to the Footer Section (keeping the overflow hidden as is).
If that’s not the issue let me know.
Unfortunately I don’t know if there’s 2FA for the Editor
Maria, Thank you for your help.
I changed the width to 100% . I did find a margin that was not correct on the iPad breakpoint. Changed that and that solved the issue before you looked at the page I believe.
I have 2FA turned on for the “Designer” was hoping it was available for the “Editors” Can that be added to a “Feature Request” ?
)