Hi Guys
Using responsive web design, when I look at my content on iPhone X in either Safari or Chrome, my form elements are falling off the bottom of the pages.
I have looked everywhere and tried scroll overflow.
Can’t wrack my brain around it, can anyone help?
TTA
Challenge: Build a Product Landing Page
Link to the challenge:
Ahh…are you using an iPhone X also?
When I look at the page on my phone the form elements don’t show on the screen and I can’t scroll to them, it’s like the scrolling stops just before them and I can only see the top border of the email box at the end of my page.
Hey @lauracarolharvey,
I wasn’t on Iphone X, but the form still show fine on mobile…
But I tried it on an Iphone X simulation, and it still works fine:
Amazing, thank you so much for your help! Just one more thing, if you don’t mind…? Can you tell me where you get this simulation from?
Thanks again!
It’s on a browser. I just opened up my developer console and use the Device Toolbar, that you can change into different devices.
You can open it on your browser by pressing the f12 key and then you should see something similar to this
Looks like it is caused by the fixed nav/ul. If you simply remove the position fixed styles from the nav/ul you should see the form.
I can’t really test the solution but I’d try moving the main styles to the header (position, offset, width, margin, background color). I think the header collapsing from its content being position fixed might be the issue.
Edit: screenshot of the problem
Thank you! Thank you! Thank you!
Took some fiddling around but it’s now working!
