Some elements get misplaced on mobile browsers that hide the address bar

[sjfoz1019]

Describe the bug
Some mobile browsers will hide the address bar when you scroll down. This causes issues with the placement of some elements, as well as being annoying to have to scroll to see the footer when the entire page should fit inside the window.

To Reproduce
Steps to reproduce the behavior:

1. Go anywhere on thewhitehat.club on mobile
2. See error
3. Scroll down to hide address bar and everything is as expected.

Expected behavior
The entire page fits in the window without the need to scroll.

Screenshots
If applicable, add screenshots to help explain your problem.
Expected (without address bar): https://photos.app.goo.gl/g8JHhhXM9Kbo7RL77
Issue: https://photos.app.goo.gl/2kM9HZAYMz3ULhA4A

Smartphone (please complete the following information):

• Device: OnePlus 6
• OS: OxygenOS 9.0.9 (Android 9)
• Browser: Chrome
• Version: 79.0.3945.93

Additional context
Also an issue on Firefox Focus 8.0.24
Interestingly, not an issue on Firefox 68.3.0