媒體查詢中的空白

-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

媒體查詢中的空白

回答

相關問題