修复手机上的 Contact Form 7 字段

Question

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

在 desktop/tablet 上看起来不错，但在移动设备上，"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 来构建网站。

Answer 1

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

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

您可能不需要 !important（先尝试没有它），但如果没有它不起作用，请添加它。

Answer 2

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

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

Answer 3

简答：将 "width: 100%;" 行添加到 CSS select 或者 "input, textarea, select, .seldiv, .select2-choice, .select2-selection--single".

长答案：这里有一些使用 Chrome 的检查功能来解决这个显示问题的步骤。

步骤 1) 使用 Chrome 浏览器查看您的显示并执行右键单击并 select "Inspect".
步骤 2) 单击切换设备图标以显示智能手机。

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

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

步骤 5) 查看在检查中进行调整时发生的情况。（一些为此可能需要反复试验。）请注意， textarea 现在有与宽度相同的宽度问题：100%；禁用。

步骤 6) 尝试添加 "width: 100%;" 以便它也适用于输入文本框。这是如下图所示完成的。笔记虽然宽度线被划掉了（由于其他 CSS 定义），此更改似乎产生了预期的结果。

步骤7) 查看显示。如果看起来没问题，请尝试制作适用的更改为您的 CSS 定义，然后重新测试更改。

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

祝你好运。

修复手机上的 Contact Form 7 字段

Fix Contact Form 7 Fields on Mobile

css

wordpress

contact-form-7