无法减小使用媒体库联系表单时的宽度
无法减小使用媒体库联系表单时的宽度
提问于 2019-04-14 21:28:41
已创建联系人表单。为了使其具有响应性，我添加了一个768px的mediquery来减小输入字段的宽度。但它不会改变。
我将附上下面的代码供您参考
<div class="form-container">
<h1>send us a message</h1>
<form class="form">
<input id="name" type="text" placeholder="Full Name">
<input id="email" type="text" placeholder="E-Mail">
<textarea id="message" cols="30" rows="10" placeholder="Message"></textarea>
<button type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>SEND</button>
</form>
</div>我使用SCSS设置我的联系人表单的样式。
.form-container {
margin: 6rem 0;
height: auto;
h1 {
color: $header-main;
text-align: center;
font-family: $primary-font;
text-transform: capitalize;
font-size: 2.3rem;
letter-spacing: 1px;
&:after {
@include shortBorder(10rem, 1rem, 3px, #111);
margin-bottom: 5rem;
}
}
.form {
input[type="text"],
textarea,button {
display: block;
margin: 2rem auto;
width: 600px;
padding: 1rem;
border-radius: 1rem;
border: 1px solid $plane-white;
box-shadow: 2px 3px 3px 3px #ccc;
outline: none;
transition: width 0.2s ease-in-out;
}
input:hover,
textarea:hover {
width: 620px;
}
::placeholder {
color: rgb(155, 148, 146);
font-weight: 900;
font-family: 'Roboto';
}
button {
background-color: $header-main;
color: $plane-white;
width: 140px;
box-shadow: none;
i {
margin-right: 0.5rem;
}
}
}
button:hover {
cursor: pointer;
width: 160px;
}
}联系人表单上的媒体查询..应从600px降至500px。
@mediaqueries screen and (max-width:768px) {
.form {
width: 500px;
}
}回答 1
Stack Overflow用户
发布于 2019-04-15 01:55:23
有一堆东西阻止了投入的萎缩。
- 您已将行和列设置为文本区域的大小参数。这在
<textarea id="message" cols="30" rows="10" placeholder="Message"></textarea>中充当宽度和高度。您应该删除它并使用CSS设置它。 - 根据您使用的
box-model，margin&padding可能会增加元素的整体宽度。 - 您的媒体查询没有针对正确的元素，因此它没有按您预期的方式应用。
Base CSS：(您正在更改.form内部输入的宽度)
.form input[type="text"],
.form textarea,
.form button {
width: 600px;
}媒体查询(更改的是表单，而不是输入的)
.form {
width: 500px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55675810
复制相关文章
相似问题