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

Question

所以我在页面底部找到了我的联系表。我收到了所有其他内容的媒体查询，我对此感到满意。但是我不满意宽度在响应时不填充。它适用于我的另一个 "div contents" 所以我不知道为什么我的表格不起作用。

我喜欢我的联系表单目前在桌面视图中的显示方式，但当您将其缩小到移动设备时，它看起来就很难看。 我想要做的是将宽度一直填充到屏幕的末尾。它适用于我的其他内容，但无论出于何种原因，此内容都没有填满屏幕！

我该如何解决？谢谢

@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>

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

Contact form width at 100% does not work when using media queries

html

css

contact-form

media-queries