How to Find Ghost CSS Elements

I love the web 🕸
I also write about personal finance in Spanish at https://perrodinero.blog
Search for a command to run...

I love the web 🕸
I also write about personal finance in Spanish at https://perrodinero.blog
No comments yet. Be the first to comment.
I've been wanting to learn Rails since ages ago, but, you know, life was getting in the way (or me, rather). A couple of weeks ago I decided to start a side-project related to another side-project. Sounds like an entry for a GitHub Graveyard, I know....
Sometimes we only need a font for a couple of words, like a logo or slogan. Why do we download the whole font file if we only need a few letters? In this post, I'll show you how you can reduce your font file size by more than 80%. This size reduction...

Queues are a natural phenomenon in everyday life. You queue to buy food, to pay in the supermarket, or to get on a plane. But queues are also used in software to handle heavy processes. A queue can help devs like me and you store a request for later ...

Software development is hard. Time zones are hard. Dealing with time zones in software development? Yeah, harder. Here are 4 places where time zones might differ; and 4 personal bug stories for each case. I'll be referring to the same app for each s...

I started the #100DaysOfCode challenge on March 21st and finished it today, August 7th. FINALLY! 🥳 And yeah, that's way more than 100 days 🙃 For those who don't know, the #100DaysOfCode challenge consists of coding at least one hour every day for t...
I recently came across a bug on our landing page which caused a weird blank space overflow on the right side:

I looked for a couple of hours trying to find any CSS spacing causing it, or some wrong element on my HTML, but couldn't find anything out of place. The blank space wasn't even inside the <html> element of the page 🧐
I then stumbled upon this post and rapidly found the problem. This blog post suggests some CSS styles to make ghost elements visible 👻:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Now, I could find the section that was causing the problem:

In the end, it was a matter of fixing some mismatching HTML elements.
Would've had this CSS styles helping me debug from the beginning, could've saved me a couple hours of work 🤦🏻♂️