Question

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

我喜欢我的联系表单当前在桌面视图中的样子，但是当您缩小到移动设备时，它看起来很难看。 我想做的就是一直填满整个屏幕的宽度。它适用于我的其他内容，但是由于某种原因，该内容并未填满屏幕！

我该如何解决？谢谢。

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:hardwareAccelerated ="true"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

    <activity
        android:name=".MapsActivity"
        android:label="@string/title_activity_maps">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="@string/google_maps_key" />

    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />

    <uses-library
        android:name="org.apache.http.legacy"
        android:required="false"/>

</application>

@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%;
  }
}

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％无效

1 个答案: