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而没有成功。当我在Google上使用Inspect检查代码时，媒体查询似乎甚至不存在。

希望有人可以对此有所了解！感谢。

Answer 1

尝试：

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

Answer 2

将以下代码添加到外观的底部 - ＆gt;附加Css

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

在Wordpress中设置样式忍者形式时，媒体查询无法正常工作

2 个答案: