Find overflowing elements in responsive

Unintended body overflow

Have you ever been in a situation where you have unwanted horizontal scrollbar, especially while doing a web page responsive. What will you do? Most probably you will be finding the culprit element, right?

You may have scrolled from top to bottom but found nothing apart from some empty space in the right. But the matter of the fact is, how will you find the offending element? May be you are about to remove every block that you might be thinking of as offending element. Or might be you may set element’s display property to none in the developers tools. This options works, but what if you have thousands of elements in your web-page, will you still going to do this. I don’t think so.

Let me share with you a simple trick, which I use whenever I am in this situation.

First of all go back to the basics. Think of the box model, use it as your guide to find out the culprit element. Apply some margin and border to all the elements, use * selector to select all the elements. It will highlight the element in the empty space.

* {border:1px solid #f00;}

You can also add: opacity: 1 !important; visibility: visible !important; in case if you have any hidden element.