Debug Web Layout Problems With This Simple CSS Trick! #css

A quick tip showing how to use the CSS star selector (*) to easily debug layout problems on the web by applying a 1px outline to all elements to visualize their size. If you have an unwanted scrollbar, you'll quickly figure out which element is the problem using this trick.

#css #csstips

Support CSS Weekly by buying my course:

Subscribe to CSS Weekly Newsletter:

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor

[spikygoldfish]

Thanks for this! I was using the background color trick for each element, but your approach is more efficient

[lianayukhymchak]

Thanks a lot! I watched this video a few days ago, and today, when I have an issue with my design, I used it)))

[kinstar]

I'll have to remember this one when I need it Thanks !!!

[dipanjanghosal]

Yea good tip to find out the problematic element. Also, to actually solve this, you will of course reduce its width, and then additionally, I suggest you to do this too:
html, body { overflow-x: hidden; }
This will disable horizontal scrolling, which is something we typically desire.