I am having an Unwanted horizontal scroll bar in my live website but not in local host

Question

I am trying to get rid of the Unwanted Horizontal scroll bar on my live website, it doesn't appear in my local host though... https://mjshubham21.live/ <-- this is my site, made using Vite + ReactJs. I tried to apply overflow: hidden; and max-width: 100% to body tag but still it didn't work... NOTE: I just started with this site, it is work in progress and not yet responsive.

I just want to ge rid of the unwanted scroll bar on my live site.

Answer 1

Yep, I get one too. It's going to depend upon your resolution, so open up your devtools into a separate window, and resize your main window. You can see the horizontal bar appear at a specific resolution.

I opened up the Chrome Devtools and started inspecting various elements. When I highlighted your upper right section, I noticed it went off the screen on the right and was wider than everything else on the page.

After looking specifically at that image, called "hero.gif", I looked at the styling for the class "heroGif" and noticed the width was set to 55%:

Manually changing that to 50%, and the scrollbar disappeared. However, when you set it to 50%, your aspect ratio on the image is all messed up (as it is at 55%). Remember that width and height % are based on the size of the container which the image resides. If you set one and not the other, the aspect ratio is retained and the image is scaled properly. I'd probably keep the height % and eliminate the width % altogether. I don't know if that class is used elsewhere, but you'll have to test to make sure it doesn't break anything else.