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.
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.
Founder of SOFTKUBE, lead developer, and getting things done addict. Passionate about open source, user interface design, business development, and the tech world.
A small team of experts developing simple, usable, and high-quality web solutions. We blog about business, entrepreneurship, web development, and technology.
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
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