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

Question

这里的新手，如果我在这里有任何问题，请见谅。

我正在为客户构建一个 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，但均未成功。当我使用 Inspect on Google 检查代码时，媒体查询似乎不存在。

希望有人能对此有所了解！谢谢。

Answer 1

试试看：

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

Answer 2

在你的外观底部添加以下代码->Additional Css

    @media screen and (max-width : 680px){
     .one-fourth {
           min-width: 100%;
           display:block;
        }
    }