Page content is hidden by mobile browser toolbar

[S4muele]

General hello everyone, I’m Sam and this is my first post

On this project I’ve used media queries to switch between two different layouts depending on the browser viewport size, in order to create a mobile-friendly version of my webpage.

https://codepen.io/S4amuele/full/ExNqbVo

And it works fine on mobile except that, when I’m on ’ Full Page View ’ on CodePen, my mobile browser bottom toolbar covers the last section of the page, which is the #Reference section.

Here’s a screenshoot, where I scrolled all the way down but the #Reference section is covered by the browser toolbar:

If I force scroll up I’m able to reveal the hidden content but as I release my finger it goes back below the toolbar

Of course there’s something I’m missing in my code because the behaviour doesn’t happen in the ’ Editor View ', where I’m able to see the entire content of the page within the preview borders.

I’m on iPhone 12 Pro Max and using Chrome version 87.0.4280.77

Thank you for any help on this!

[lasjorg]

First, try adding the viewport meta tag.

Settings > HTML > Click the button that says “↑ Insert the most common viewport meta tag”.

Secondly, the default Codepen views are not that great for debugging how it really looks. If you change the View to Debug mode (Change View > Debug mode) you get a full page view without the Codepen UI.