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

添加box-sizing：border-box;所以你的填充包含在尺寸中。

重力表格的响应按钮

1 个答案: