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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learning Spark — Part 1 Spark Environment Installation

Lab Elements I

Automating Data Transformation over Cloud

A Guide For Java Enum

Barr appoints special counsel in Russia probe investigation

Connect existing NSG to subnet with Azure Bicep

TWTW-Week 2 (November)

How to Create Your Product Roadmap in 2020 (5 Templates Included)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Singh Panwar

Abhishek Singh Panwar

More from Medium

MDN Styling and Layout w/CSS chapter 8

Introduction to Flexbox

Riot Games Client UI clone with HTML and CSS

Riot games clone desktop

Responsive Web Design