How to identify the element causing an overflow

With page builders it’s frequent to have a situation where the body of the page exceeds the browser’s viewport, resulting in an horizontal (or vertical) overflow. Identifying the culprit element can be very frustrating; but there’s a quick fix.

CSS Code Snippet to highlight all elements and identify the overflow

This works for Divi, Elementor, WordPress sites, non WordPress sites, really any kind of website, because all you need is just this CSS trick.

CSS

* {
  outline: 1px solid red !important;
}

And it will produce something like this:

identify overlow in website
As a result, all the elements in your page will be outlined, quickly showing you if any of them is overflowing their container.

You’re welcome.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.