How to identify the element causing an overflow

Pietro Mingotti — Wed, 22 Jan 2025 20:41:48 +0000

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:

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.

overflow – Pietro Mingotti

How to identify the element causing an overflow

CSS Code Snippet to highlight all elements and identify the overflow