Hello!! đź‘‹
In the last week of Hacktoberfest, I tackled an issue with the mobile navigation dropdown for the Clean and Green Philly project. This project, developed to support sustainable interventions to reduce gun violence in Philadelphia, had a minor yet significant problem on mobile devices: the Donate option in the dropdown menu was not fully visible when the screen width was reduced, making it difficult to access.
Issue #976: Donate Option Hidden in Mobile Nav
Bug Overview:
When users navigate on smaller screens, the navigation bar switches to a hamburger menu. The “Donate” option, located at the bottom of this dropdown, was barely visible and difficult to click without scrolling due to the dropdown’s limited height. (Issue #976)
Solution: PR #985 – Adjusting the Mobile Navigation Dropdown max-height
My solution was to increase the max-height of the mobile dropdown menu to make sure all items were visible without the need to scroll. This adjustment allows users to access the "Donate" option with ease, improving the accessibility and user experience on mobile devices. (PR #985)
Technical Challenges Faced:
- Understanding the Codebase: Being new to the project, I first had to get familiar with its layout and structure.
- Styling Libraries: The project uses Next-UI and Tailwind CSS, which were both new to me. I had to quickly get up to speed with Tailwind’s styling conventions to locate and fix the dropdown’s CSS properties.
-
Locating the Issue: After investigation, I found that the
.mobileIconLinkNavclass inglobal.csscontrolled the height. This class was custom-designed for the mobile nav, and increasing itsmax-heightresolved the issue. -
Following Contribution Guidelines: I initially submitted my PR to the
mainbranch, overlooking the instruction to submit to thestagingbranch. The reviewer helped guide me in switching the PR to the correct branch, emphasizing the importance of following contribution protocols.
Closing Thoughts
This week was a rewarding learning experience that taught me how to quickly adapt to new styling frameworks while making meaningful contributions to a live project. Overall, it was another productive week of Hacktoberfest, and I look forward to tackling more challenges like this in the future!
Hacktoberfest 2024 Wrap-Up
After four weeks of Hacktoberfest, I’m wrapping up with a mix of accomplishment and growth. Each project and pull request has been an opportunity to learn new tools, dive into unfamiliar codebases, and apply my problem-solving skills to real-world issues. Along the way, I’ve expanded my understanding of diverse tech stacks—from navigating Tailwind and Next-UI in Clean and Green Philly to handling GitHub API limitations and exploring effective UI handling techniques.
Hacktoberfest has been more than just about completing PRs; it’s been a hands-on journey into open source collaboration. I’ve gained valuable insights into the importance of clear communication, thorough documentation, and the small but impactful improvements that make a difference in the user experience. Working with different teams has also reminded me how supportive the open-source community can be, with reviewers and maintainers offering constructive feedback and guidance.
Looking back, each week presented new challenges, but each contribution left me more confident in my skills. Hacktoberfest 2024 has not only strengthened my technical abilities but has also reinforced my passion for contributing to projects that create meaningful change. I’m excited to carry this momentum forward, knowing that the experiences I’ve gained this month will benefit future collaborations and contributions. Here’s to many more Hacktoberfests to come!
Top comments (0)