Update HTML/CSS to accommodate mobile devices with notches#5980
Update HTML/CSS to accommodate mobile devices with notches#5980angrytoenail wants to merge 6 commits intostashapp:developfrom
Conversation
WithoutPants
left a comment
WithoutPants
left a comment
There was a problem hiding this comment.
Sorry for the delay in testing this.
| padding-left: env(safe-area-inset-left); | ||
| padding-right: env(safe-area-inset-right); |
There was a problem hiding this comment.
This breaks styling on other viewports, since the safe-area-inset-x values are 0, when the bootstrap container-fluid class uses 15px as the left and right padding values. It also appeared to provide too much padding on my Pixel device when in landscape mode and added a horizontal scrollbar. If I removed these lines (leaving the viewport-fit change), then the page rendered correctly.
I tried the following which worked on my desktop PC, and it eliminated the scrolling on the Pixel, but still rendered with too much left padding in landscape mode:
padding-left: calc(max(env(safe-area-inset-left), 15px));
padding-right: calc(max(env(safe-area-inset-right), 15px));
|
Closing as stale. |
|
Opps, I hadn't enabled notifications on this alt account and never saw your comments @WithoutPants ! I'm happy to look into the padding issues you mentioned, I'm sure there'll be a way of achieving the right balance of spacing that works across all devices and screen sizes (admittedly I assumed non-iPhone devices would be unaffected). Would you mind re-opening this? @Gykes |
4 participants
Resolves #5979