Where It All Started.

Where It All Started.

Life, Stock Trading, Investments, Business and Startup. Most are programming stuff.

Find Unintended CSS Overflow

Ever coded an HTML static design site? I’m sure you’ve encountered problems where you’ve just installed some CSS framework then coded some additional CSS files. After you’ve finished the code you run it on a browser then TADAHHH!


You can only find truth with logic if you have already found truth without it.

— Gilbert Keith Chesterton.

There were overflows horizontal and vertical scrollbars. 😁

It’s a bit cumbersome to find where those scrollbar or overflow originated, so that’s what this article is for. In order to find those overflows, here’s a one liner that you can directly paste on your web developer console or just press F12 then the console tab. The console tab is the place where you look at javascript logs (console.log), anyways just copy this then analyze it first before pasting on your console.

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

Here is the full script which had been beautified for readability:

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

If you analyze carefully the code, you’ll see that on the first instruction it gets the current document offset width. Then it loops on all selector which are class and id’s, if it found an offending or greater than the offset width it will print that element attributes and location.

That’s all guys!

Let me know in the comments if you have questions or queries, you can also DM me directly.

Also follow me for similar article, tips, and tricks ❤.

Popular Posts

  • Bitcoin (BTC) Still Bullish According To BlockTower
    The continuous Bitcoin volatility, according to BlockTower Capital’s general partner Michael Bucella, should not come as a surprise because it is part of the asset’s development trajectory. Bucella told CNBC […]
  • Major Firm BlackRock To Create It’s Own Blockchain ETF
    According to a filing with the US Securities and Exchange Commission on Jan. 21, BlackRock Inc., the world’s largest asset management business, has applied for an exchange-traded fund (ETF) that […]
  • Google Going Crypto
    As the firm looks to provide a wider range of financial services, including cryptocurrencies, Google has hired veteran PayPal CEO Arnold Goldberg to manage its payments division. Google’s action comes […]
  • Total Crypto Market Cap Will Reach 5 Trillion USD In 2022 According To AvaLabs CEO
    In 2022, John Wu, the CEO of Ava Labs, a blockchain business that creates the software for the Avalanche (AVAX) blockchain, offered a lot of fascinating forecasts for the cryptocurrency […]
  • Pavia Metaverse Project Debuts On Cardano (ADA)
    The Metaverse is currently in its early stages. While Ethereum-based metaverse games like The Sandbox have exploded in popularity, investors are also interested in developing applications on secure PoS networks […]

Leave a Reply

Your email address will not be published. Required fields are marked *