ER: Headers Are Different Heights From the Top Navigation Bar in Mobile Views

[JessicaLucindaCheng]

Emergent Requirement - Problem

The Donate page header and the Join Us header are different heights from the navigation bar at the top of the page in mobile and tablet views (screen width 767px or less).

Click here to see a gif of the problem

Issue you discovered this emergent requirement in

• Not applicable because from Task List Dev Leads

Date discovered

2022-06-04

Did you have to do something temporarily

• YES
• NO

Who was involved

@JessicaLucindaCheng
@ExperimentsInHonesty

What happens if this is not addressed

The pages do not look uniformly formatted, which reduces the site's professionalism.

Resources

• Donate page
• Join Us page
• Site Map

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

Create an issue including but not limited to the following Action Items:

• Create a spreadsheet to track the results of the audit
• Audit spacing between the top navigation bar and the first header on each web page in tablet and mobile views (screen widths 767px and 479px)
• In a comment, write your recommendation(s) for how to solve this problem.
• Discuss with a Merge Team member on a plan to fix it. The plan can include just fixing the problem if the solution is simple, writing ER(s) to implement a solution, or it may require writing an epic because it is complex.

[github-actions]

Hi @JessicaLucindaCheng.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Feature

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels