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 文件中