重力形式的响应按钮答案

【问题标题】：Responsive button for Gravity Forms重力形式的响应按钮
【发布时间】：2015-10-02 15:18:44
【问题描述】：

我最近开始在我的基于 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;
    }
}

【问题讨论】：

标签： css wordpress gravity-forms-plugin

【解决方案1】：

添加 box-sizing:border-box;所以你的填充包含在大小调整中。

【讨论】：