How to Tell Which Website Element is Wider Than the Display with CSS

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.