修复移动设备上的联系表格 7 字段答案

【问题标题】：Fix Contact Form 7 Fields on Mobile修复移动设备上的联系表格 7 字段
【发布时间】：2018-01-18 21:58:08
【问题描述】：

我正在使用 Contact Form 7 作为此页面右栏中的表格http://ernielovespizza.com/get-in-touch/

在桌面/平板电脑上看起来不错，但在移动设备上，“NAME”和“EMAIL”字段超出了右侧的屏幕，但“MESSAGE”字段很好。

有谁知道为什么会发生这种情况以及可以采取什么解决方法？

这是我的表单代码：

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

目前我没有任何特定的 CSS。我也使用 Visual Composer 来构建网站。

【问题讨论】：

标签： wordpress css contact-form-7

【解决方案1】：

您可以将此规则添加到您的自定义 CSS：

.wpcf7 input {
  max-width: 100% !important;
}

你可能不需要!important（先不带它试试），但如果不带它就不行，添加它。

【讨论】：

【解决方案2】：

简答：添加“宽度：100%；”行到“input, textarea, select, .seldiv, .select2-choice, .select2-selection--single”的CSS选择器。

长答案：以下是使用 Chrome 的 Inspect 功能找出此显示问题的一些步骤。

步骤 1) 使用 Chrome 浏览器查看您的显示器并执行右键单击并选择“检查”。
第 2 步）单击切换设备图标以获取智能手机显示屏。

步骤 3) 选择适用于您的问题的显示类型。（我选择了 “三星 5”，因为那看起来更像是一个问题已描述。）此图像显示电子邮件输入文本框比消息文本区域宽。

步骤 4) 在“样式”面板中查看是否与宽度相关可以看出会导致文本区域宽度正常的差异而不是文本框。我注意到 textarea 有一些 CSS 将其宽度定义为 100%，我没有看到其他输入元素。所以我在 Inspect 中禁用了它，看看会发生什么。

步骤 5) 查看在 Inspect 中进行调整时发生的情况。（一些可能需要尝试和错误尝试。）请注意， textarea 现在与 width: 100% 有相同的宽度问题；已禁用。

步骤 6) 尝试添加“宽度：100%;”所以它也适用于输入文本框。如下图所示完成了此操作。笔记尽管宽度线被划掉了（由于其他 CSS 定义），这种变化似乎产生了预期的结果。

步骤 7) 查看显示。如果看起来不错，请尝试使适用的更改您的 CSS 定义，然后重新测试更改。

此外，探索 Chrome 的 Inspect 工具中的不同选项；它对于在进行任何 CSS 编辑之前诊断显示问题和尝试解决方案非常有用。

祝你好运。

【讨论】：

这太棒了，非常感谢您的详细解释。这个工具太酷了！

【解决方案3】：

假设输入类型是文本（根据需要进行更改）。这段代码可以解决问题，

<style>
input[type=text]
{
/* change as necessary */
max-width:500px;
min-width:250px;
/* this will resize input box if width between 500-250 */
width:100%;
}
</style>

【讨论】：