If you own a website and you are working for its presentation to be the best, but the site has a horizontal scroll issue that you want to fix or remove. So, that the user can only scroll the site in the vertical direction, not in the horizontal one. So, you are at the right place.
Horizontal scroll in a web page or site does not seem to be good and also interrupts the user experience. This is much common in the mobile view of the site, whether it’s a static or responsive site. Well, we have pointed out the reasons for this and the solutions below.
Reasons for Horizontal scroll on Website
Horizontal scroll in a website or webpage can occur for various reasons. And it can occur on any site for different reasons.
Bad CSS
CSS is responsible for all the orientations and presentations of the webpage. And if you are not familiar with the CSS then you might mess it with the additional CSS option in your CMS or theme customizations. Well, in this case, make sure to remove the CSS that you have just added to your site theme.
Only remove the CSS that you have added recently with regards to the width or height of any element.
If you considered and found that your site CSS is not good and causing the horizontal scrolling, then use the below CSS in the additional CSS or add via theme editor.
Try this CSS and check –
html, body{
width:100%;
overlow-x:hidden;
}Image Size
Images are responsible for the horizontal scroll in most cases. Most of the themes are responsible nowadays which automatically adjusts the width of the images according to the device-width with respect to its aspect ratio. But for some responsive sites too, the images can be adjusted in a manner that tends the horizontal scroll.
If the horizontal scroll is caused by image size issue, then add the below CSS to fix it.
img{
display:flex;
}The display flex makes the image to be flexible according to the device screen which makes them responsive too, and counter the horizontal scroll.
Conclusion
Hope this CSS will help you to remove the horizontal scroll issue on your website, please let us know if they don’t. Also if you have any other issues regarding this or have a better idea to fix then comment down below.
