css - 重力形式的响应按钮

Question

我最近开始在我的基于 wordpress 的网站上使用 Gravity Forms。我对我的表单做了一些基本的样式设计，它似乎在桌面浏览器上运行良好。在移动设备上，表单会调整大小但按钮看起来很奇怪。如何将按钮限制在移动设备的外包装中，使其看起来与表单字段的宽度相同？

这是页面的链接:http://46.4.68.131/gravity-forms/ .此外，这是自定义按钮的 CSS。

body .gform_wrapper .gform_footer input[type=submit] {
    font-size:12px !important;
    background-color:#e4685d !important;
    -moz-border-radius:5px !important;
    -webkit-border-radius:5px !important;
    border-radius:5px !important;
    display:inline-block !important;
    color:#ffffff !important;
    font-size:16px !important;
    padding:8px 16px !important;
    text-decoration:none !important;
}

这是我为响应性而试验但没有成功的代码。任何帮助，将不胜感激。谢谢。

@media only screen and (max-width: 767px) { 
    body .gform_wrapper .gform_footer input[type=submit] { 
        width: 50% !important;
    }
}

Answer 1

添加框大小:边框框；因此您的填充包含在尺寸中。