Certification page display issues - background and bottom padding

Looking forward for reporting a security issue: Please report security issues by sending an email to [e-mail] instead of raising a GitHub issue.

Describe the bug There is some display issues with the certification page, for example:

• The background is set to height 100% which means it cuts off at strange places depending on the browser size.
• There is no spacing at the end of the page so the last line of text just bumps into the bottom of the browser window

To Reproduce Steps to reproduce the behavior:

1. View a certificate page (tested on Mac/Chrome)
2. Scale the browser window so it has a scrollbar
3. Scroll down and see that the white background cuts off (see screenshot 1 below)
4. Scroll to the end of the page to see that the page doesn’t have any padding (see screenshot 2 below)

Expected behavior

Screenshots Screenshot 1:

Screenshot 2:

Desktop (please complete the following information):

• OS: [e.g. iOS] Mac
• Browser: [e.g. chrome, safari] Chrome
• Version: [e.g. 22] Version 88.0.4324.150 (Official Build) (x86_64)

Additional context

[ahmadabdolsaheb]

@ShaunSHamilton, yes some spacers at the bottom should do the trick. Other than the issue @rtpHarry mentioned regarding the sections running together, i cannot think of anything else.

P.S the donation element on the top of the certification should be reviewed after the fix.

[ieahleen]

there is also this, can be addressed here or better a new issue? https://forum.freecodecamp.org/t/the-responsive-webdesign-certificate-is-not-responsive/447635