Странный пробел css / html при переходе на просмотр мобильного устройства - PullRequest
Новая
       10

Странный пробел css / html при переходе на просмотр мобильного устройства

0 голосов
/ 02 июля 2018

У меня странный пробел, который создает прокрутку по оси x, когда я переключаюсь с обычного представления браузера ПК на мобильное отображение с F12 в Google Chrome. В мобильном представлении есть пробел, пока я не перезагружу страницу, а затем она исчезла. Вы можете увидеть это на картинке ниже. 

<div id="search">
    </div>

    <div id="search-content">

        <div class="search-item"></div><br>     

</div>

CSS: 

html{   
    width: 100%;
    font-family: 'PT Sans', sans-serif;
}

#header{
    color:white;    
    background: #0198E1;
    height: 65px;   
}

#header-text{
    margin: 0px;        
    height: 65px;   
    text-align: center;
    padding-top: 17px;
    font-size: 25px;
}

#search{
    width: 100%;
    height: 180px;
    background: #2a3849;
}

#search-content{
    background:#f4f4f4;
    width: 100%;    
    text-align: center;
    padding-bottom: 50px;
    padding-top: 40px;  
}

.search-item{
    background: #ffffff;
    height: 200px;
    width: 1000px;
    margin-top: 10px;
    display: inline-block;
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
    -moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
    box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
}

#content{   

}

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

    .search-item{
        width: 95%;
        height: 180px;
    }

}

example

...