[Handbook] Extra spaces in the beginning every page of handbook.

[gourav-k-shaw]

Current Behavior

This extra space in the beginning is present in all of the pages of handbook

Desired Behavior

Removal of extra spaces from all pages

Screenshots / Mockups

Implementation

Acceptance Tests

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[gourav-k-shaw]

@leecalcote @hortison created an issue for the present of extra spaces in the handbook pages. May you please assign this to me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[hortison]

@sudhanshutech you've worked in this area before. ...

[tirukovelamanoj]

@hortison, Can i work on this issue?

[leecalcote]

Thanks, @tirukovelamanoj

[tirukovelamanoj]

Thanks @leecalcote , @hortison. I have few observations regarding the spaces that are showing up in the handbook pages.

Total 16 pages in Table of Contents:

1. About
2. Guidelines
3. Roles
4. Contribution
5. Recognition
6. Repository Overview
7. Projects
8. Mentorship Programs
9. Writing Program
10. UX Contributors
11. Learning
12. Connect with us
13. Code of Conduct
14. Security Vulnerabilities
15. GitHub Process
16. FAQs

And there is extra notable space when the screen width is 750px-768px and >768px for the below pages (Group 1):

1. Contribution
2. Projects
3. Writing Program
4. UX Contributors
5. Code of Conduct
6. Security Vulnerabilities
7. GitHub Process
8. FAQs

These can be fixed by adjusting the margin-top css property of page-section class in Handbook.style.js

      @media (min-width: 750px) {
        margin-top: -32rem;
        margin-left: 20rem;
      }

      @media screen and (min-width: 768px) and (max-height: 1145px) {
        margin-top : -62vh ;
      }

And below are the pages that are having notable extra space when the screen width is in between 750-768px (Group 2):

1. About
2. Guidelines
3. Roles
4. Repository Overview
5. Learning
6. Connect with us

These can also be fixed by adjusting the same CSS properties as above but the reason we are not seeing the extra notable space in-between 750-768px screen width is due to the following lines in code

          <Container>
            <div className="content">
              <a id="top">
                <h2>Layer5 community leader undertake different roles</h2>
              </a>
              <p>
                A leader is someone who can contribute to the Layer5 Community's
                growth by faithfully upholding one of the responsibilities outlined in the roles below.
              </p>

So because of <a><h2></h2><p></p><a> these tags being inside the <div className="content">, the problem is becomming different if we move them above the div tag like the below these would also fall under the same fix as of first 8 pages (Group 1)

        <Container>
          <h2 className="heading-top">General contribution flow</h2>
          <p>
            Pull requests (PRs) are the best ways to propose changes to a
            project repository. At Layer5 org, we use the Github Flow:
          </p>
          <div className="content">
            <a id="Clone your fork">  <h3>Clone your fork to your local machine</h3> </a>
            <ul>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tirukovelamanoj]

Commenting to keep the issue active, I am currently working on it.

[tirukovelamanoj]

This issue has been addressed in a separate PR with a more optimized solution. You can find the PR that resolves the issue here https://github.com/layer5io/layer5/pull/6615

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.