vertical scrolling too far on mobile

I have 2 webpages which scroll down much further than they need to. This only happens on a mobile screen in portrait mode. When the mobile is rotated to landscape, the excessive y-axis scrolling doesn’t occur, and when I return to portrait mode, the problem is gone ! and the page stops where it should stop.

I have three webpages and this happens only on two of them.

I’m not sure which is the problem, the css or the html. Here is the css.

thank you very much for your help

html,body
{

overflow-x: hidden;

width: 960px; 
margin: 0 auto 0 auto;"
 }
 header{

    position:relative;
    width:auto;
   max-width:960px;
    margin: 0 auto 0px auto;
}

#logo-container img{
    width:100%; 
    height:auto;
}







.containerspace
{
  width:auto;
    margin: 0 auto;
    position:relative
    max-width:960px;

}

#thespace{
float:right;
font-family:Helvetica, sans-serif;
font-size:12px;
text-align:right;
padding-right:1px;
width:auto;


}



@media (max-width:500px)  
{
html,body
{
width:auto; !important;
overflow-x: hidden; !important;
}


    #containerspace
    {
           float:left;
            width:460px;
            margin: 30px auto;
            position:relative
            margin-left:auto;
            margin-right:auto;              
    }

    #thespace{
        float:none;
        padding-left:30px;
        font-size:14px;

            }
    #containerspace img{

        width:100%; 
        height:auto;

        }
    #text_column{
        width:auto;
        font-size:14px;
    }

}


@media (max-width:400px) 
{

    #containerspace
    {

            width:300px;


    }





}


Source: css

Leave a Reply