Scrolling on Android Mobile not working

Question

I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-

#main {
    height: inherit;
    bottom: 0px;
    transition: transform 1.2s ease-out;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 0px;
    z-index: 2;
    display: block;
    backface-visibility: hidden;
}`

The element that is showing no matter how much I scroll is given below-

#banner_wrapper {
    margin-top: 55px;
    width: 100%;
    height: 900px;
    position: relative;
    top: 0;
    left: 0;
    opacity: 0.4;
    z-index: 0;
}

I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-

https://robustious-methods.000webhostapp.com/

Answer 1

The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.

With position: fixed , this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.

If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.

If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh; .

More reading about CSS positioning here .