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

问题: This question already has an answer here: width: 100%-padding? 14 answers So I got my contact form at the bottom of the page. I got the media queri...

问题:

This question already has an answer here:

So I got my contact form at the bottom of the page. I got the media queries for all of my other contents and I am satisfied with it. However I am not satisfied that the width does not fill when it is in responsive. It worked for my other "div contents" so I don't know why my form is not working.

I like how my contact form is currently in desktop view, but it just looks ugly when you shrink it down to mobile. What I want to do is to fill the width all the way to the end of the screen. It worked for my other content but this content is not filling up the screen for whatever reason!

How do I fix it? Thanks.

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


回答1:

Although you're setting your form to have a width of 100% it still has padding on the left and right of it. Thus, it cannot go the full width.

You can set:

padding: 100px 0;

In your media query to remove the padding from the left and right, and reduce the padding on the top and bottom of your form when your page is at the correct size.

See example below:

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

  • 发表于 2019-02-14 01:01
  • 阅读 ( 170 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除