css - 在 Wordpress 中设置忍者表单样式时媒体查询不起作用

Question

这里是新手，如果我在这里有任何错误，请见谅。

我正在为客户构建一个 wordpress 网站并尝试设置联系表单的样式(目前使用 Ninja 表单插件)。使用基本版本，很容易在一行中有两个字段，但我想做的是移动 View ，将右侧字段文件整齐地放在一列中。

插件中的相关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 检查代码时，媒体查询似乎根本不存在。

希望有人能对此有所启发!谢谢。

Answer 1

尝试:

.one-half {
    margin:0;
    width: 48%;
    display:block;
}