Second Cute PR for Hacktoberfest
For my second PR for #hacktoberfest challenge, I wanted to try fixing a bug, instead of working on a feature. I enjoy fixing front-end related bugs, so I decided to give this issue a try.
Challenge Accepted
The issue was about author info hiding behind the GitHub info when scrolling down the page in Telescope. At first, I thought that fixing that issue was a matter of removing one of the HTML elements and having both author info and GitHub info being wrapped around in one element. I was thinking that maybe when they are both in a single element, the bug will go away. However, after trying to apply this approach, I realized that it wasn't as easy as I thought. The more code I kept changing, the more issues that were not even related to that bug started coming up. That made me have an epiphany that I was most likely overcomplicating everything.
So I decided to stash my changes just in case and start over where I began. This time, I decided to change as less code as possible to fix the bug🐛. So I run the app and thought that using Developers Tools would be a good option. I clicked on element picker and selected the area of the website I was concerned about. Then, I was just playing around with the CSS it had, by turning each CSS element on and off one by one to see if maybe the issue will be fixed having one of them off. Eventually, I found out that the issue was with the sticky element and its container. Here is my PR for this issue.
Here is what I learned:
Basically, the container will delimit when the sticky element should be kept on the screen. In other words, sticky element will keep the position relative to the screen. Sticky basically means "staying within the screen". So when you put 10px as a value for the top attribute (top: 10px), you are telling the sticky element to start being sticky once the top of the screen gets closer than 10px from the element. There is a great demonstration of how this works with code snippets that I found on Stack Overflow. You can check it out here(P.S. check out the first comment with the code snippets).
Takeaways:
I learned that when it comes to CSS related bugs, it is better to start off with Developers' Tools when fixing them rather than changing too much code when it could be just a matter of adding one line of CSS. Next time, I will start debugging from there!😜
Top comments (0)