Having trouble with responsiveness on my site. Not sure if it's a relume issue or the way I have it in Webflow, but when I go into landscape mode on my iPhone, bars (of the background color of the site) appear to the right and left of the screen. When in portrait mode on iphone, the bar appears above the nav bar. I read some forums that said to set overflow to hidden, but it still doesn't work. I've attached screen shots as this does not appear in Webflow's preview mode, but only when published. The share-only link is also below.
https://preview.webflow.com/preview/jarret-roloff-portfolio?utm_medium=preview_link&ut[…]o&preview=e8ccb53f673758b9f5515ca2f57098e8&workflow=preview
Hi Jarret, I believe this is due to one of the many beloved features of the safari browser. It loads the color of the page and applies it to the browser bar (and the left and right extended space in mobile landscape) and then keeps that color as it’s not dynamic out of the box. See links below for potential workarounds found after a quick search.
Not sure about best practices on this topic, and whether or not one should be adjusting these things or not.
https://medium.com/@evkirkiles/coloring-the-webkit-browser-bars-28d75cd8cf7f
https://forums.developer.apple.com/forums/thread/683403
https://medium.com/@adboio/how-to-change-your-websites-address-bar-color-in-safari-15-4c032c86daab
Thanks for the responses. I'll look into those solutions more, but I used the chrome app on my phone and the bars on the side still appear. Is there an easier solution for this? My coding skills are subpar, to say the least...
