Prevent Horizontal Scrolling CSS without using overflow. Learn how to use <style> * { outline: 1px solid red !important } </style>, JavaScript, or Developer Tools to debug layout issues on your website.

Forget the platform specific tools that you use to debug your website’s frontend. There is a single line of code that you can use to debug all of your CSS positioning issues. Others may suggest for you to use the overflow property and call it a day. However, using overflow has no guarantee of doing more than hiding the problem. Instead, let’s solve the issue directly from the source.

What is Horizontal Scrolling?

Whenever the vertical dimension (height) of your website exceeds the user’s screen height (viewport y), a scrollbar appears. This isn’t a problem since most people use devices that are optimized for vertical scrolling. Unfortunately, the same thing will occur for the horizontal axis (or worse). This can lead to frustration as devices handle the additional width accordingly.

You need to prevent these layout issues for a better user experience.

Don't Use Overflow

Certain programmers apply the overflow property to their elements to “fix” this problem. However, doing so addresses a symptom rather than providing a cure. By using overflow, you end up moving elements — larger than the viewport — around the page or hiding them altogether. This leads to a variety of issues down the road that you can avoid. Instead of solving layout issues by covering up elements, you need to identify which specific element is causing the problem.

How can you identify which element is causing the problem?

The Line

<style> * { outline: 1px solid red !important } </style>

That’s it. The best part? You can run the line on ANY website you visit and at any time!

Don’t use the border property for this purpose because it can affect the actual width of the element.

Using The Line

In order to use the line, open the offending page on your browser. Once this has occurred, right click anywhere on the page to bring up the menu and select “Inspect Element”, then navigate to the “Elements” tab. These actions are equivalent to Right Click > Inspect Element > Elements. Alternatively, use the shortcut for your respective browser: ctrl + shift + c (Chrome, Firefox), cmd + option + i (Safari).

From here, right click any line on the page and select “Edit HTML” (Right Click > Edit HTML). Then, exit the editor by clicking anywhere outside of the focused textbox.

This results in a page similar to the following.

Want it gone? Refresh the page.

Using JavaScript

In certain cases, the above method will not be sufficient enough to find the issue: Human eyes can only do so much. If that is the case, you may have one more tool in your toolbox before whipping out the big guns (Developer Tools). The following JavaScript code finds all elements greater than the window length on the page.

document.querySelectorAll(“*”).forEach(function(element) {<br>
    if (element.width > window.screen.width) {<br>
        console.log(“Wide Element: “, element, “Width: “, element.width);<br>
    }<br>
});

Using Developer Tools

Developer Tools allow you to test and debug your code (from the browser). Chrome DevTools (Documentation) is a modern example of a popular browser developer tool. For more information on HTML/CSS debugging with developer tools, check out this list: The Developer Tools Guide.

Submit an Issue

It’s inevitable for you to encounter issues while browsing the internet. Instead of feeling hopeless while tears stream down your face, use these tools to figure out what’s wrong. Don’t be the friend who doesn’t tell you about sh*t in your teeth. Let the owner know! Your efforts will be appreciated greatly, or you will relish in glory from showing them their place in this society.

Have an issue to submit to this website? Provide feedback using the instructions from the guide.