Search code examples
htmlcssresponsive-design

horizontal scroll persistently on website

Whenever I'm creating a website with HTML & CSS, I find that the site acquires a horizontal scroll. On inspection with Chrome DevTools, I never see what is causing the issue. All the elements are always within the page and none of them generate boxes that extend outside of the page. Even without any elements on screen, there would be a horizontal scroll; the effect is especially persistent on mobile screens. I might be able to make the scroll disappear on a large screen like a laptop by doing either

body {
    width: 95vw;
}

and/or

body {
    overflow-x: hidden;
}

but it never goes away on mobile. The result is a slight, annoying, left-right motion on any website I ever make, like the following:

and pretty much every other responsive website I've ever built that has a mobile design.

I've scoured the internet for solutions and I've gotten things like 'use box-sizing: border-box;', 'remove/resize any overflowing elements', etc. I also came up with the fix I mentioned above involving width: 95vw; for the body element. I've also searched this platform for answers and come across some, like this, that make me wonder if the answerers have ever actually come across the problem in their own code before. None of these solutions actually ever work and I'm curious as to how everyone else makes websites that don't have this nagging horizontal scroll in their websites.

So here's how to reproduce the issue.

<body>
    <main>
        stuff
    </main>
    <footer>
        feet
    </footer>
</body>

/* General Styles */
@media screen
    and (min-width: 300px)
    and (orientation: portrait), (orientation: landscape) {
body {
    background-color: hsl(0, 0%, 86%);
    color: hsl(0, 0%, 8%);
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    margin: auto;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}
}

When created, view the website on Chrome DevTools on a mobile phone's dimensions whether iPhone or any other kind of phone. Tap and hold the site and drag it around.

Would really appreciate a lasting fix for this

Solution

  • Use this, what it will do is remove whatever is exceding the body:

    width: 100vw !important;
overflow-x: clip !important;

    do not use overflow-x: hidden as still it will not stop the children from going out of boundaries. I tried applying the above code on your websites, and it works.