媒体查询中的空白

-1

我的页面右侧有空白，我不知道是什么导致了它。我的控制台中没有显示任何内容显示页面超过100％宽度的视口。这发生在640px以下的视口中。我已经检查了所有的边距，我没有看到任何超出正确的边距，甚至没有涉及到屏幕右侧的边距。媒体查询中的空白

有没有人看到任何导致这种情况？

相关代码：

@media screen and (max-width:640px) { 
.project-flex-wrap { 
    display: block; 
} 
.project_arrow_box { 
    width: 100%; 
    height: 400px; 
    box-sizing: border-box; 
} 
.project_arrow_box:after, .project_arrow_box:before { 
    top: 100%; 
    left: 50%; 
} 
.project_arrow_box:after { 
    border-width: 0px; 
    margin-left: 0px; 
} 
.project_arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #00a16d; 
    border-width: 36px; 
    margin-left: -36px; 
    margin-top: 0; 
} 
#project-content-wrap { 
    margin: 20% 5%; 
} 
#project-box-title1 { 
    font-size: 1.1em; 
    color: #FFF; 
} 
#project-box-description { 
    font-size: 1em; 
    color: #303030; 
    margin-top: 40px; 
    line-height: 1.6em; 
} 
/*-----Input div on project page----*/ 
.white-green { 
    width: 100%; 
    height: auto; 
    position: relative; 
} 
#white-green-section { 
    left: 15%; 
} 
.project-input-container { 
    top: 100px; 
    left: 2%; 
    position: relative; 
    margin-top: -30px; 
} 
.project-input-container2 { 
    top: 30px; 
    left: 0%; 
    position: relative; 
    margin-top: 45px; 
} 
.input-borderless { 
    width: 87%; 
    border-top: 0px; 
/* text-decoration: none; 
    outline: none;*/ 
    display: block; 
    padding: 10px 0; 
    margin: 20px 0; 
    font-size: .8em; 
} 
/*---Project Scope section---*/ 
#project-scope-container { 
    top: 70px; 
    left: 3%; 
    margin-bottom: 100px; 
    width: 95%; 
    height: auto; 
    position: relative; 
} 
#project-scope-title { 
    font-size: 1.1em; 
    font-weight: bold; 
    margin-bottom: 15px; 
} 
.project-option-boxes { 
    display: block; 
    border: 1px solid #45ba95; 
    padding: 20px 0px; 
    margin: 15px 0px 15px 0px; 
    width: 85%; 
    font-size: .9em; 
} 
.box_focused { 
    background-size: 20px 20px; 
    background-position: 5% 50%; 
} 
.light-gray { 
    display: none; 
} 
/*-------Project Slider Section -----*/ 
#project-slider-container { 
    width: 95%; 
    height: auto; 
    margin: 50px 2.5% 20px 2.5%; 

} 
#project-slider-title { 
    text-align: center; 
    font-size: 1.1em; 
    top: 15px; 
    margin-bottom: 15px; 
    /*margin-left: 40px;*/ 
} 
#project-slider-description { 
    text-align: center; 
    font-size: .9em; 
    color: #2a2a2a; 
    margin: 0 20px; 
} 
#sliderBar { 
    border-radius: 15px; 
    width: 100%; 
    height: 30px; 
    margin: 30px 0; 
    background: #454343; 
    position: relative; 
    overflow: hidden; 
} 
.intervalCircle { 
    border-radius: 50%; 
    height: 10px; 
    width: 10px; 
    background: #CCC; 
    z-index: 1; 
    margin-top: 18px; 
    cursor: pointer; 
} 
.intervalCircle:hover { 

} 
.rangedot { 
    height: 36px; 
    position: absolute; 
    text-align: center; 
    left: 0px; 
    top: -8px; 
} 
#sliderInterval { 

    line-height: 30px; 
} 
#sliderIntervalBudget { 
    padding: 0 2px; 
    font-size: .7em; 
} 
#budgetAmount { 
    font-size: 1.1em; 
}

来源

2016-03-08 Paul

我没有看到右侧的任何空白。 – ketan

当不应该打开时，它会创建一个水平滑杆。 – Paul

我也没有看到任何水平滚动条。 – ketan

好了我给你所面临的问题。它看起来在更小的屏幕上。

只需将#project-scope-container div的宽度减至85%即可解决您的问题。目前是95%。然后将.project-input-container左边减少到0。

#project-scope-container { 
    height: auto; 
    left: 3%; 
    margin-bottom: 100px; 
    position: relative; 
    top: 70px; 
    width: 85%; 
}

来源

2016-03-08 05:00:46 ketan

谢谢你的帮助，并抓住它，这是你看，看，看，无法捕捉的东西之一。 – Paul

尝试这种风格，并期待

@media screen and (max-width: 640px){ 
#project-scope-container { 
top: 70px; 
left: 3%; 
margin-bottom: 100px; 
width: 88%; 
height: auto; 
position: relative; 
} 


.project-input-container { 
top: 100px; 
left: 2%; 
position: relative; 
margin-top: -30px; 
} 
}

调整你的width在#project-scope-container和删除left从.project-input-container

来源

2016-03-08 05:01:09

媒体查询中的空白

回答

相关问题