Question

我有一个响应式css的网站，媒体查询分别为768px，480px和320px。当我调整大小低于1040px时，整个页面的右边缘会出现相同的额外空间，我无法弄清楚它来自何处。这是一个WordPress网站。这是jsfiddle link。

这里有一些相关的CSS：

body,
html {
  height: 100%;
  width: 100%;
  margin-left: -.01em;
}
body {
  font-family: "ff-dagny-web-pro", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  color: black;
}
#main {
  margin: 0 15%;
}
@media only screen and (max-width: 768px) {
  #main {
    margin: 0 10% 0 10%;
  }
}
@media only screen and (max-width: 480px) {
  #main {
    margin: 0 5% 0 5%;
  }
}
#content {
  float: left;
  width: 68%;
}
@media only screen and (max-width: 480px) {
  #content {
    width: 100%;
  }
}

提前致谢！

Answer 1

我发现了有问题的对象，宽度是一个埋在页面中间的div（社交图标），对于较小的视口没有调整大小。感谢所有帮助我保持专注的人。

Answer 2

检查.form-search上的css。固定像素宽度为219px，margin-left为80%。

.form-search {
  height: 14px;
  width: 219px;
  margin: 0em 0px 0px 80%;
  padding: 1em 0px 0px;
}

将像素宽度与百分比边距相结合是创建宽度超过100％的元素的可靠方法。

您是否尝试过使用网络检查器？它是Web调试中不可或缺的一部分，我强烈建议您学习使用Web检查器，以便自己找到这些类型的问题（Stack Overflow不是调试引擎）。

css响应宽度在右边距中创建额外空间

2 个答案: