I created a one-page responsive portfolio. On Chrome’s dev tools everything looks fine, but when I open Codepen on my iPhone X in Safari, the welcome section stretches the length of the entire site. This must have something to do with the height being 100vh, or maybe it’s the fixed background?
Any help would be appreciated, I’m going crazy trying to figure this out!
Hi @ca1221, sorry I’m a little confused about what you’re trying to do. This looks great by the way!
How does the welcome section look to you on iPhone X, and how do you want it to look instead?
Here are a couple screenshots I took as I scrolled down the page in ‘Full’ mode on Safari (beginning to end). I did notice that if I go into ‘Debug’ mode the background isn’t stretched out, but the issue of the background-attachment not being fixed still persists. I’m wondering if this is a Codepen issue, since everything works perfectly on my desktop using Chrome. Sorry if this is hard to understand - I’m just as confused!
Here are a couple screenshots from ‘Debug’ mode. The background is not positioned how it should (it looks to be zoomed in or something?) and it’s not fixed. Other than that everything is fine.
Hi @ca1221 I’ve recreated your problem and I’m not entirely sure what it is. I believe it may be a browser bug/incompatibility issue with the CSS height value 100vh.
Browsers are not created equally, and there are inconsistencies with CSS and JavaScript per-browser. However, I can’t find anything explicitly on Can I Use. It may also be related to this bug in mobile browsers.
When I change the section#welcome-section height value to something other than 100vh it works fine. So maybe try changing it and experimenting to see if that works.
[EDIT]
Yup, I was able to recreate this issue in another pen using 100vh. Check it out on mobile here.
My advice: Don’t worry, you’ve done a really fine job here! Using newer CSS techniques sometimes mean breakage on different browsers and it’s apart of the dev life! You can change the design, use @media queries to target smaller devices, or move on to the next challenge 
Wow thanks for all your help and kind words, Nick!! Really appreciate it 
Happy to help! Please reach out if you need any more help. Good luck, and again, great job!
