Hello folks !
I have one really weird issue with my project.
In fact, the issue doesn’t show up with the designer preview mode (nor with the google chrome responsive inspect mode).
But it did shows up on iPhone Landscape mode when I test my integration.
Please see this image :
The page doesn’t take full width of the screen.
I think this is a problem with my body element or another symbol because the issue appear on all pages.
Can you please help ? Thanks a lot !
The behavior for iPhone is different than for other OS, the Home bar and Notch bar will render as whitespace (only bg color showing) but does not allow content to render edge to edge in mobile landscape unless you use a little CSS and a meta tag.
Here is a related article on Stackoverflow: html - When rotating an iPhone X to landscape, white space appears to the left and below cover image - Stack Overflow
Try putting this code in the Head of your page:
<style>
html {
padding: env(safe-area-inset);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
After adding code, republish the site and then check on iOS again. I tested the site with the current code on Android and that renders properly from edge to edge, so this seems to be just an iOS difference in the way the page is rendered.
Alright, I see. Thanks for your answer !
Unfortunately, it doesn’t work :(.
Hi @tvog, I tested myself on a test site and it worked fine on my end, did you republish the site after making the custom code change? Do you have that page url with the code change made that I can help to take a look?
Hi @tvog, the custom code seem to be working on iOS now, the notch and home bar are now hidden and site extends edge to edge:
I may be misunderstanding the issue you are having, let me know how things look on your end.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.