As the title says, my portfolio page project seems to load and work properly on desktop browsers (Safari, Chrome, Firefox), but when I go to the page on my phone (iPhone 6 using Safari), the scrolling seems broken, navigation only works partially, background images don’t seem to display correctly. Can anyone who knows better offer any advice? I suspect maybe something in the head element is incorrect, but I’m not sure what to look for. Thanks!
First of all, nice site! The overall design, look and feel is really good.
So part of the issue might be that a couple of your containers have a css overflow property of auto. Realistically, you don’t want to allow for overflow, because if your design is truly responsive, then it should respond at different view sizes.Additionally, allowing for overflow is a pain, because now you have the main screen scrolling and then each container scrolls as well. It’s not user-friendly.
Even though removing the overflow means that the overall length of the scroll on your site is extended, it’s much better this way and allows for more natural scrolling and interaction to occur.
Note: I tested this on my Android phone with the Google Chrome browser.
1 Like
Thank you so much! I hadn’t realized overflow caused those problems, thank you for taking the time to explain it as well, I really appreciate it!
It turns out your solution was indeed part of the overall fix. There were also some issues with the way the background images were displaying with the background-attachment: fixed; property, which seemed to prevent scrolling. Adding overflow-x: hidden !important; to the body ultimately remedied it. If anyone reading this is curious though, the overflow-x property causes a weird scrolling behavior in Safari on iOS, the fix is adding -webkit-overflow-scrolling: touch; Thanks again for your help!