Small Screen Width Bug on Landing Page

[Pertempto]

Describe the bug

• On screen sizes below ~450px width, the nav bar buttons start losing the space between them.
• On screen sizes below ~338px width, the body of the UI gets white spaces around it on the bottom and right sides.

To Reproduce

1. Open the landing page on desktop
2. Open chrome dev tools with the device toolbar turned on
3. Start diminishing the screen width.
4. Watch the nav bar UI
5. Watch the body UI

Expected behavior

• The nav bar should handle screen widths of less than 450px better
  • The logo should not disappear
  • The buttons should re-layout somehow instead of getting squished together
• The body should not get white spaces around it on screen sizes below 338px

Screenshots

There might not be very many but there are still iPhone 5 and original SE owners out there, and other people with devices that have such small screen sizes. We don't want to scare them away from the site. You have to set a lower bound on screen width at some point - I usually aim for making it operate fine at 300px width, though we could aim for 320px instead if you want.

Environment (please complete the following information):

• Device: Laptop
• OS: Windows 11
• Browser: Vivaldi

[Pertempto]

@arrocke the "Resources" and "Volunteer" buttons are really only nice helpers. Maybe we should just hide them at certain screen widths? The user can still access all the content of the page by scrolling down.

[arrocke]

That works for me