我正在为Wordpress网站编写一些媒体查询，但我无法让我的表单重新调整页面大小。我在一个前端站点测试了这个，这是WP版本的前导，但是它工作但是在WP站点上它并不想重新调整大小。我已经尝试了几种不同的方法让它重新调整大小，但它不会移动。
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px !important;
padding-right: 10px !important;
}
section#form, {
height: 300px !important;
max-width: 100%;
}
section#form h2 {
font-size: 15px;
margin-top: 50px;
color: #000000;
}
span {
color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
float: left;
}
.email, .phone {
margin-top: 20px;
}
.phone p, .email p {
font-size: 10px;
margin: 5px 0 0 10px;
}
.phone img, .email img {
height: 30px;
width: 30px;
}
.phone::after, .email::after { /*clearfix*/
content: '';
display: table;
clear: both;
}
section#form form {
height: 200px;
width: 600px;
margin-top: 50px;
}
fieldset {
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
}
section#form div.row {
display: flex;
max-width: 100%;
}
section#form div.row input {
margin-left: 5px;
}
section#form div.row input:first-child {
margin-left: 0;
}
section#form input[type=text],
section#form input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
section#form textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
section#form input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
input[type=submit]:hover {
background: #00bfff;
}
@media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 ;
width: calc(100% - 40px);
box-sizing: border-box;
}
div.column {
float: none;
}
}
@media screen and (max-width: 480px) {
body {
max-width: 500px;
border: 1px dashed #ccc;
min-height: 400px;
}
section#form {
width: 100%;
height: auto;
}
form {
height: auto;
width: 100%;
}
}<body>
<section id="form">
<div class="container">
<div class="six columns">
<h2><span>To start getting great advice,</span> get in touch.</h2>
<div class="phone">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
<p>0113 220 5265</p>
</div>
<div class="email">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
<p>hello@featuremedia.co.uk</p>
</div>
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
</div>
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
</section>
</body>
我需要它在页面内调整大小。它第一次在前端版本上工作，但现在它不会。任何帮助表示赞赏。
答案 0 :(得分：1)
awk '/interface GigabitEthernet/' RS='!' YourFile > NewFile
您可以使用Bootstrap Form更简单快捷地执行此操作。
答案 1 :(得分：0)
您曾在某个时刻使用固定价格。如果你改变了这个：
section#form form {
height: 200px;
width: 600px;
margin-top: 50px;
}
到此：
section#form form {
height: 200px;
margin-top: 50px;
}
应该有效：
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px !important;
padding-right: 10px !important;
}
section#form, {
height: 300px !important;
max-width: 100%;
}
section#form h2 {
font-size: 15px;
margin-top: 50px;
color: #000000;
}
span {
color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
float: left;
}
.email, .phone {
margin-top: 20px;
}
.phone p, .email p {
font-size: 10px;
margin: 5px 0 0 10px;
}
.phone img, .email img {
height: 30px;
width: 30px;
}
.phone::after, .email::after { /*clearfix*/
content: '';
display: table;
clear: both;
}
section#form form {
height: 200px;
margin-top: 50px;
}
fieldset {
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
}
section#form div.row {
display: flex;
max-width: 100%;
}
section#form div.row input {
margin-left: 5px;
}
section#form div.row input:first-child {
margin-left: 0;
}
section#form input[type=text],
section#form input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
section#form textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
section#form input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
input[type=submit]:hover {
background: #00bfff;
}
@media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 ;
width: calc(100% - 40px);
box-sizing: border-box;
}
div.column {
float: none;
}
}
@media screen and (max-width: 480px) {
body {
max-width: 500px;
border: 1px dashed #ccc;
min-height: 400px;
}
section#form {
width: 100%;
height: auto;
}
form {
height: auto;
width: 100%;
}
}<body>
<section id="form">
<div class="container">
<div class="six columns">
<h2><span>To start getting great advice,</span> get in touch.</h2>
<div class="phone">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
<p>0113 220 5265</p>
</div>
<div class="email">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
<p>hello@featuremedia.co.uk</p>
</div>
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
</div>
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
</section>
</body>