1
私はWordpressサイトのいくつかのメディアクエリを書いています。私のフォームはページのサイズを変更することができません。私はWP版のプリカーソルだったフロントエンドサイトでこれをテストしましたが、WPサイトではサイズ変更したくありませんでした。私はサイズを変更するためにいくつかの異なる方法を試しましたが、動かないでしょう。CSS - サイズ変更しないフォーム
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px !important;
padding-right: 10px !important;
}
section#form, {
\t height: 300px !important;
\t max-width: 100%;
}
section#form h2 {
font-size: 15px;
margin-top: 50px;
color: #000000;
}
span {
\t 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 {
\t height: 30px;
\t 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>[email protected]</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>私はそれがページ内にサイズを変更する必要があります。フロントエンド版で初めて動作しましたが、今は動作しません。どんな援助も感謝します
あなたの 'form'要素は' width'を指定していますが、 'max-width'プロパティは指定していません。 'フォーム{ 最大幅：100％; } 'それがあなたの問題を修正するかどうかを確認してください –
@Ihazkodeメインスタイルまたはメディアクエリでは？ –
メインスタイルですべてのデバイスに適用されます –