A recent Hacktoberfest contribution I made came from finding this issue while browsing the Mozilla Github page. Bedrock is the repo for the mozilla.org website and Mozilla provides very good documentation to get started. Thanks to Docker I was able to install and run bedrock with no issues in just one command.
The problem
The arabic version of the webpage for the Firefox Browser (Developer Edition) had an issue where the main image of the browser would not scale down on mobile devices, resulting in horizontal scroll.
The issue was filed on June 8th and one person tried to solve it but was not successful and so it remained silent since July 26th.
Based on the comments in the issue page, it seemed like the problem was related to the 'bidi' sass @mixin used by Mozilla. The docs explain it like this:
The bidi mixin (short for “bi-directional”) is used to declare both left-to-right and right-to-left values for a CSS property together, and output appropriate declarations for each.
The fix
After many failures trying to solve this issue by changing the bidi values, I was ready to drop it and move on. I then realized that I was really trying to solve an easy issue in a complicated way. The main problem was in the CSS and adding overflow: hidden; to .intro-image did the trick!
This is how the website looks now (Notice no more horizontal scrollbar):
The PR was quickly merged. Even though this was a one line fix, I am proud of the fact that I was able to contribute to an organization such as Mozilla. This contribution made me realize that sometimes, when I am stuck, I need to take a step back and look for the simplest solution to the problem.
Top comments (1)
Awesome job!