新手在这里,如果我在这里有任何问题,请道歉。
我正在为客户构建一个 wordpress 网站并尝试设置联系表单的样式(当前使用 Ninja 表单插件)。使用基本版本,一行很容易有两个字段,但我想要做的是移动视图,将右侧字段文件整齐地放在一列中。
插件中的相关CSS如下:
.nf-form-cont {
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
clear: initial;
float: left;
margin-left: 2.564102564102564%;
.inside {
padding: 20px;
}
&::after {
clear: both;
content: "";
display: block;
}
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
我在下面编写了 CSS,它使第二个字段低于第一个字段并删除了边距:
.one-half {
margin-left:0;
width: 100%;
}
这很好用,直到我像这样放置媒体查询:
@media only screen and (max-width: 719px) {
.one-half {
margin-left:0;
width: 100%;
}
}
通过阅读此处的其他问题,我相信这个问题可能与媒体查询中需要一个 ID 有关,但我尝试了许多 ID 都没有成功。当我在 Google 上使用 Inspect 检查代码时,媒体查询似乎不存在。
希望有人可以对此有所了解!谢谢。