The other day I was updating a website and while I was checking it out on mobile, I noticed the screen was wider than the site. It’s sort of a pain in the butt to tell which part of your website is wider than the display.
Don’t you hate that?!
I don’t usually play around with overflow or visibility properties, and (obviously) try to avoid sizing things to be larger than the display… but sometimes when you are working on a website, things don’t appear right the first time.
(That’s why we test, right?).
Anyway, so I couldn’t tell which element on my website was too wide when I was looking at the staging site on my phone.
Luckily for me I remembered this cool trick I learned a while back. (I don’t quite remember where I picked it up but it’s saved me a bit of time more than once).
What you do is use the CSS Universal Selector to select all the elements, and add a red border around everything. Like this:
CSS Select All
* {
border: 1px solid red;
}The code above should outline most (or all) of the elements on your web page, and then all you have to do is figure out which element has a border that is wider than the display, and fix that item.
I don’t know if there’s a better way to do this. But if you found it, I hope it helps!
Follow me on Twitter.