Allowing a horizontal scroll bar is one of the most common mistakes in Responsive Web Design (RWD). The horizontal scroll bar occurs when some element on your page is wider than your viewport. Listed below are troubleshooting notes on how to track down the issue as well as suggested CSS to remove the horizontal scrollbar.
Note: This is a technical issue and best handled by your web developer. Please feel free to share this resource with them. If you don’t have a web developer or this is a particularly thorny issue, I’m available for hire and would be happy to help.
Horizontal Scrollbar on Narrow Screens
Most often the horizontal scroll bar issue occurs on narrow screens, like phones. You can recreate this on your desktop browser by clicking the the bottom right corner and dragging it to narrow your browser.
Find the Offending Element
Once your browser has been narrowed, scroll down and seek out the element that is too wide. Chrome Developer Tools – Inspect Element is particularly helpful in determining the HTML element that is causing the problem.
Common Solutions
Images and Videos that are Too Wide
Most of the sites I fix involve images and videos that are not appropriately sized to their container. The lines I’ve listed below can provide a quick fix (or at least a starting point for a fix).
img {
max-width: 100%;
height: auto;
}
embed,
iframe,
object,
video {
max-width: 100%;
}
Unfortunately, this code does not allow videos to maintain their aspect ratio (instead they get narrow and tall). To maintain the aspect ratio for videos a more advanced technique is needed.
A Name or URL is Too Long
By default a very long word or URL will not wrap, causing a horizontal scroll bar. By applying the following CSS to the element (or a parent of the element) these long words or URLs will break.
word-wrap: break-word;
Don’t be Overwhelmed
Hopefully, these tips will allow you and your team to apply CSS to remove the horizontal scrollbar. If you’d like assistance with this or other CSS and JavaScript issues, please let me know.