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
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.
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!