These width and height related things always present problems on different layouts for me. I struggle a lot to make it work both on iPad, desktop (full screen version) and mobile, so when I don’t have to make it fancy, I tend to avoid it.
If I have to, I will try to write different code snippets for each device. Can’t rely on just vw and vh, in my experience.
In all three situations, I’m only looking at the mobile layout. I’m viewing the desktop version on my iPad pro, which still loads the version with all three buttons stretched across the bottom.
I’m not using vh or vw. I’m using flex-grow for the middle button and px for the two on the side. What would be a better measurement?
So, after inspecting the code through Safari in “mobile view”, what seems to be the problem is that iOS ignores the boundaries of the <button> parent and just stretches the “visible” part of the button (.floating-btn-style) across the whole screen.
Any ideas on how to force the visible part to behave?
I can definitely target it by class, but not sure what property to use.
There’s an additional problem that iOS seems to be loading those floating elements “on top of the page” instead of following the Glide’s component order… all kinds of fun stuff around that…