Question

我的页面右侧有空格，我不知道是什么导致了它。我的控制台中没有显示任何内容显示页面超过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;
}

Answer 1

好的，我遇到了你所面临的问题。它看起来更小。

只需将#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%;
}

Answer 2

尝试这种风格并查看

@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

媒体查询中的空白

2 个答案: