Freecodecamp: Maintenance Page Header is Covered by Nav

[Sky020]

Describe the bug
At 100% zoom on Chrome, the first line of the first sentence on the maintenance page is not visible.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://www.freecodecamp.org/forum (has to be under maintenance)
2. Ensure zoom is 100%
3. Break trackpad/scroll-wheel trying to scroll up enough to view text.

Expected behaviour
All text should be visible
Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 83.0.4103.61
• Resolution: 1366 x 768

Additional context
Minor inconvenience.

[nhcarrigan]

It seems to be working fine on my end. Zoom level set to 100%.

OS: Windows 10
Browser: Chrome
Version: Version 83.0.4103.97

[Sky020]

@nhcarrigan , Your view has a tonne of margin at the top. That is odd.

[Twaha-Rahman]

@nhcarrigan , Your view has a tonne of margin at the top. That is odd.

@Sky020 These margins can be due to different monitor sizes..... I'd guess @nhcarrigan is using 4K monitor.

@nhcarrigan Can you confirm it?

[nhcarrigan]

I'm on a 1080p display, with a 1920x1080 resolution.

[Twaha-Rahman]

Well then.... I'll check if I can reproduce the issue.

@nhcarrigan Thanks for clarifying!

[raisedadead]

I do not have Windows, and was unable to reproduce this. Here is the file that we serve directly off of NGINX during maintenance:

https://github.com/freeCodeCamp/error-pages/blob/master/maintenance.html

You should be able to test the same by grabbing a copy and using a local server like http-server.

[Sky020]

Thank you, for linking that. After opening I also did not get the same issue:

But, if the screen is any bit smaller, the issue appears:

[raisedadead]

...if the screen is any bit smaller, the issue appears...

This was built in a bout of juggling servers and devops. It did not get the love it should have 😅.

Please feel free to update the CSS, layout, etc (its all in one single file and needs to be that way) and make a pull-request.

[Twaha-Rahman]

I made a PR to the maintenance page that should make it responsive and fix this issue.

[nhcarrigan]

We may need to reopen this issue as the bug is still present on a mobile device:

This occurs in my browser and in the PWA.

System Information
OS: Android 10
Device: LG G7 ThinQ
Browser: Chrome Version 83.0.4103.101

[ahmadabdolsaheb]

I believe the one that is displayed for the forum maintenance is a a modified version of the maintance.html
https://twitter.com/LucasSorenson6/status/1276222689359912960/photo/1

so we should make sure that one is also updated.