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;
}

这是在你的 commander_less.css 文件中