使用媒体查询[复制]当以100％的接触形式宽度不工作

Question

这个问题已经在这里有一个答案：

• width: 100%-padding? 14个回答

所以，我得到了我的联系方式在页面的底部。我得到了媒体查询了我所有的其他内容，我很满意。但是我不满意的是，宽度不补当它在响应。它的工作为我等“DIV内容”，所以我不知道为什么我的形式是行不通的。

我喜欢我的联系方式是如何目前在桌面视图，但是当你缩小它归结为移动它只是看起来丑陋。我想要做的是，以填补宽度一路到屏幕的结束。它的工作对我的其他内容，但这些内容没有完全填满了无论什么原因，屏幕！

我如何解决它？谢谢。

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.form {
  background: rgb(30, 30, 40);
  min-height: 600px;
  padding: 200px;
}

form {
  max-width: 420px;
  margin: 50px auto;
}

.feedback-input {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border: 2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  outline: 0;
}

.feedback-input:focus {
  border: 2px solid #CC4949;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background: #CC6666;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: white;
  font-size: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

[type="submit"]:hover {
  background: #CC4949;
}


/* This is the part that is not working for whatever reason! */

@media only screen and (max-width: 840px) {
  .form {
    width: 100%;
  }
}

<div class="form">
  <form>
    <h1 style="text-align: center; color: white;">Contact Me!</h1>
    <p style="text-align: center; color: white;">
      Let me know if there is any way I can be of service to you.
    </p>
    <input name="name" type="text" class="feedback-input" placeholder="Name" />
    <input name="email" type="text" class="feedback-input" placeholder="Email" />
    <input name="subject" type="text" class="feedback-input" placeholder="Subject" />
    <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
    <input type="submit" value="SUBMIT" />
  </form>
</div>

Answer 1

虽然你设置你的form有100％的宽度它仍然有左边和右边填充。因此，它不能去的整个宽度。

您可以设置：

padding: 100px 0;

在媒体查询删除从左侧和右侧的填充，并减少对表单的顶部和底部填充，当你的网页是在正确的大小。

见下面例子：

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
  margin: 0;
}

.form {
  background: rgb(30, 30, 40);
  min-height: 600px;
  padding: 200px;
}

form {
  max-width: 420px;
  margin: 50px auto;
}

.feedback-input {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border: 2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  outline: 0;
}

.feedback-input:focus {
  border: 2px solid #CC4949;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background: #CC6666;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: white;
  font-size: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

[type="submit"]:hover {
  background: #CC4949;
}


/* This is the part that is not working for whatever reason! */

@media only screen and (max-width: 840px) {
  .form {
    width: 100%;
    padding: 100px 0; /* add this */
  }
}

<div class="form">
  <form>
    <h1 style="text-align: center; color: white;">Contact Me!</h1>
    <p style="text-align: center; color: white;">
      Let me know if there is any way I can be of service to you.
    </p>
    <input name="name" type="text" class="feedback-input" placeholder="Name" />
    <input name="email" type="text" class="feedback-input" placeholder="Email" />
    <input name="subject" type="text" class="feedback-input" placeholder="Subject" />
    <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
    <input type="submit" value="SUBMIT" />
  </form>
</div>