css - css响应不起作用并覆盖我的内联样式

Question

我有一个 wordpress 网站，我正在使用 bootstrap css 弹出窗口。请在此处查看页面：http: //aboutpubliseek.staging.wpengine.com/test-page/

当我将浏览器的宽度减小到小于 770 像素时，电子邮件的文本框的高度会减小。我发现没有办法解决它。我对输入元素使用内联 css，我使用带有 !important 标签的媒体查询，我还尝试删除除 bootstratp.css 之外的所有其他 css。但同样的结果。所以我认为 bootstrap.css 有问题。当我将宽度减小到小于 770 像素时，有些东西会覆盖我的 css。

请检查我用于测试的以下代码：

@media screen and (min-width:481px) and (max-width:770px){
    #gform_fields_2 {
        input[type='email'] {
            background-color:#EEE;
            padding:5px 10px !important;
            min-height: 30px !important;
        }
    }
}

这里背景颜色有效，但填充。你能帮我解决这个问题吗？

谢谢。

Answer 1

添加这个

min-height: 42px !important; 

对此

#gform_fields_2 input[type='email'] {

}

所以它变成了

#gform_fields_2 input[type='email'] {
/*..css defs that are already there */
min-height: 42px !important;
}

这是在你的 command_less.css 文件中