0
textareaの対応連絡先フォームは正しく動作しますが、小さい画面のinput type=textフィールドは正しく機能していません。私はメディアクエリを追加しようとしました。メディアクエリを使用してテキストフィールドのサイズを変更するにはどうすればよいですか？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.contact-form {
line-height: 1.4;
width: 50%;
margin: 0 auto;
}
.form-group {
background: #F6DDCE;
margin-bottom: 1em;
padding: 10px;
}
.form-group ul {
list-style: none;
margin: 0 0 2em;
padding: 0;
}
.form-group li {
margin-bottom: 0.5em;
}
.form-group h3 {
margin-bottom: 1em;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
box-sizing: border-box;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9em;
text-decoration: none;
line-height: normal;
max-height: 3em;
}
.form-fields input[type="text"]:focus,
.form-fields input[type="email"]:focus,
.form-fields textarea:focus {
color: #333;
border: 1px solid #C17CCF;
outline: none;
background: #f2f2f2;
}
.form-fields textarea {
display: block;
box-sizing: border-box;
font: 0.9em Lato, Helvetica, sans-serif;
width: 100%;
height: 6em;
overflow: auto;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
line-height: normal;
}
.form-fields label{
text-align: left;
}
.send-btn {
border-radius: 0px 2px 2px 0px;
box-sizing: content-box;
background: #8B798C;
font-weight: 300;
text-transform: uppercase;
color: white;
padding: 0.35em 0.75em;
border: none;
font-size: 1.1em;
text-decoration: none;
cursor: pointer;
}
.send-btn:hover, .send-btn:focus {
background: #C17CCF;
}
/*flex it*/
.send-form {
display: flex;
flex-wrap: wrap;
}
.form-group {
flex: 1 0 300px;
}
.form-submit {
flex: 0 0 100%;
}
.form-fields li {
display: flex;
flex-wrap: wrap;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
flex: 1 0 230px;
}
.form-fields label {
flex: 1 0 90px;
}
/* Adding media queries*/
@media (max-width: 400px) {
body {
width: 100%;
margin: 0;
padding: 0 0 2em;
}
header, .form-submit {
padding: 2% 5%;
}
}
</style>
</head>
<body>
<header>
</header>
<form class="contact-form">
<section class="form-group">
<h3>Contact Us</h3>
<ul class="form-fields">
<li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li>
<li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li>
<li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li>
<li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li>
</ul>
</section>
<section class="form-submit">
<button type="submit" class="send-btn">Send</button>
</section>
</form>
</body>
</html>
私は以前上記のコードを追加しましたが、ブレークポイントが400ピクセルでした。それで、それは機能していませんでした。同じコードセットが768pxで動作しています。つまり、正しいブレークポイントを設定することが非常に重要です。ありがとうございました.... –
@AakrishaAgarwalPlsは答えとしてそれがあなたを助けるならそれを受け入れます。 – vivek