html - 使用媒体查询时联系表单宽度为 100% 不起作用

Question

<分区>

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>