html - double vertical scrollbar on mobile version of my web app

Question

Hi (sorry for my basic english) ,

i've got a problem with mobile devices on my web app. it seems to be a problem with my overflow-x hidden settings and i don't want to delete because i want to keep it for the "ergonomics" of my web app.

i've put all the content of my body in a div wrapper because if not, overflow-x :hidden didn't work on mobile device (i've got this idea with a stackoverflow's ask which has resolve my problem)

this error appears when i've got a lot of content on my page. i've seen something about div which is bigger than body but there isn't a "min-height" to my body.

my app is an django/python one, so the html is a bit different, there is the main html from what didn't change on the website (footer, header,) and the page's html is in another html file. But i think the error came from the main html and css.

thank you for answer :)

i put the html and the css content of my main file.

@media screen and (max-width: 500px){
    body{



        background-color: #e20d0d;

    }


    html{

        font-size: 45%;
    }

    .wrapper{




    }

    .nav-links{
        position: absolute;
        right: 0px;
        height: 500px;
        top: 8vh;
        z-index: 1;
        background-color: rgba(9, 94, 190, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40vw;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;





    }
    .nav-links li{
        opacity: 0;
    }

    .burger{
        display: block;
    }
}

and the html in my body div :

<header class="main-header">
    <nav>
        <div class="logo">
            <h4><a href="{% url 'index_simple' %}">Yufind</a></h4>
        </div>
        <ul class="nav-links">
            <li><a href="{% url 'index_simple' %}">Accueil</a></li>
            <li><a href="{% url 'about' %}">à propos</a></li>
            <li><a href="{% url 'index_contact' %}">Contact</a></li>
            <li><a href="{% url 'index_category' %}">Catégorie</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>

        </div>
    </nav>
</header>

{% block body %}{% endblock %}

<footer class="page-footer">

            <div class="footer-wrapper">
                <h4><p>?Copyright UFind 2020</p></h4>
            </div>

    {% block footer %}{% endblock %}
</footer>

question from:https://stackoverflow.com/questions/65952331/double-vertical-scrollbar-on-mobile-version-of-my-web-app

Answer 1

Waitting for answers