Mobmet
  • Guide
    • Miui
    • Oxygen OS
  • Gaming
    • Pubg New State
    • valorant
  • Download
    • Live wallpaper
  • windows
    • Windows 11
  • Fix
  • Forum
No Result
View All Result
Mobmet

How to Remove Horizontal Scroll in a Website

Piyush by Piyush
December 5, 2021
Remove Horizontal Scroll in Website

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.

Table of Contents

  • Reasons for Horizontal scroll on Website
  • Bad CSS
  • Image Size
  • Conclusion

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.

Related – How to Change Dark Mode Color in JNews WordPress Theme
Piyush

Piyush

I am a student, who has a deep interest in the tech world. I like to share my thought about tech-related queries and want to help people through my knowledge. If these little things help people in any mean then I feel glad about it.

Related Posts

How to Open Two Apps in One Screen on OnePlus Phones
Fix

3 Finger Screenshot/Split Screen Gestures Not Working on OnePlus Phone

April 2, 2022
How to Resize Netflix Picture in Picture Mode Popup Player
Fix

Picture in Picture Mode Not Working Netflix

July 29, 2022
Windows 11
Fix

App or Game Like Valorant Keeps Minimizing Fix on Windows 11/10

February 7, 2022

Leave a Reply Cancel reply

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

  • Disclaimer
  • For Site USERS
  • More

Best Deals Today

No Result
View All Result
  • Guide
    • Miui
    • Oxygen OS
  • Gaming
    • Pubg New State
    • valorant
  • Download
    • Live wallpaper
  • windows
    • Windows 11
  • Fix
  • Forum

@2021 - Mobmet.com