layer5io
[Handbook] CSS is messed up
Description
Too many media queries, too many opposing margins and paddings.
Expected Behavior
Style code needs removed and cleaned up.
Screenshots
Example, so much wasted whitespace before page heading:
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.
@Priyadharshini0101 will you please confirm if you have the site running successfully and your approach of solving this issue?
I’d like to work on this issue.
✅ I’ve read through the CONTRIBUTING.md.
✅ My development environment is set up, and I’m able to successfully build and run the project locally.
🛠️ Proposed Approach:
I’ll identify and refactor redundant or conflicting media queries, margins, and paddings across the stylesheets or components. The goal is to streamline the styling logic for better maintainability and eliminate unnecessary white space (like the gap above page headings shown in the screenshot). I’ll ensure the layout remains responsive and visually consistent across devices post-cleanup.
Please assign this issue to me so I can begin working on it. Thanks!
Great @ayush14189 We'll be able to discuss in the sites call of Monday, I suppose. https://meet.layer5.io