Trying to use the overflow-X: "hidden"; but it doesn't working in the mobile screens

user_15947976 0
Viewed 58

when I try to minimize the width the overflow-x: hidden works but when I try to display it in small screens with google feature it override the overflow x hidden and I dont know why?!

@media (max-width:768px) {
    body{
       overflow-x: hidden;
    }
    .list{
        position: absolute;
        top: 8vh;
        right: 0;
        width: 50%;
        height: 92vh;
        color: #eee;
        transform: translate(100%);
        background-color: rgb(110, 164, 172);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        transition: transform 0.5s ease-in-out;
    }
    .list li{opacity: 0;}
    .burgger{display: block;}
}
<nav>
    <div class="logo">
        <a href="#">Logo</a>
    </div>
    <ul class="list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    <div class="burgger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

navbar css html javascript
1 Answers

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present. I suggest you to try:

html, body {
  overflow-x:hidden 
}

(not only body)

Or to create a site wrapper div inside the <body> and applying the overflow-x:hidden and position: relative to that wrapper instead of the <body> or/and <html>.

Best Regards, ykostov

user_117311390
Related