Finding and Fixing Unintended Body Overflow to Remove Horizontal Scrollbars
November 18, 2020

Introduction

During the development and testing phases of a website's frontend, finding and fixing horizontal overflow issues can be challenging.

In some cases, it might be easy via DevTools to find and select the element that is wider than the document is and then fixing its CSS accordingly.

Most times though such elements are dynamically generated and maybe by a third party plugin and are more difficult to find unless you use some of the below tricks to identify the offending elements.

Solution Steps

Open your favorite browser's developer tools panels. Under Windows, the F12 key opens DevTools on both Chrome and Firefox.

Copy/paste this into the console panel and run it. It will print out the offending elements. Doesn't work for all elements though which leads us to the CSS attempt below.

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Add this style to the elements panel (Click the add style button then add the * match all selector and then copy/paste the styles to it).

Then you can scroll around and see the offending element highlighted in red.

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

Steps in this article are based on the Finding/Fixing Unintended Body Overflow article and its comments originally published on the excellent CSS Tricks website. Please refer to it as it has more in depth discussions on the overflow issue and possibly more tricks to try in case the above ones don't work for you.


Development Design

Share this post


Written by
Mario Awad

Founder of SOFTKUBE, lead developer, and getting things done addict. Passionate about open source, user interface design, business development, and the tech world.

More about Mario Awad


About
SOFTKUBE

A small team of experts developing simple, usable, and high-quality web solutions. We blog about business, entrepreneurship, web development, and technology.

More about us


Recent Posts

Gaining Access to a Legacy Google Apps Account When Phone Verification Fails

Custom Theme Migration from Drupal 9 to Drupal 10

How to Change the Most Recent Git Commit Message

How to Make Google Chrome Forget a Permanent HTTP 301 Redirect

View all posts


All Posts Categories

Business Cheat Sheets CLI Design Development Downloads Drupal Email Google Apps HID Keyboards Multilingualism Open Source Philosophy PHP Pointing Devices Productivity Quotes Science Security SEO Technology Thoughts Windows Zend Framework