Content falling off bottom of page

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

https://codepen.io/lauracharvey/pen/ZEQbeYL

Challenge: Build a Product Landing Page

Link to the challenge:

Hello there @lauracarolharvey,

Just a quick question, what do you mean by “falling off”?

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

1 Like

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

1 Like

Thank you! Thank you! Thank you!

Took some fiddling around but it’s now working!