修复移动设备上的联系表单7字段

Question

我正在使用联系表单7获取此页右栏中的表单http://ernielovespizza.com/get-in-touch/

它在台式机/平板电脑上看起来不错，但在移动设备上显示＆＃34; NAME＆＃34;和＃34; EMAIL＆＃34;字段延伸到右边的屏幕，但是＆＃34; MESSAGE＆＃34;场很好。

有谁知道为什么会发生这种情况以及修复可能是什么？

这是我的表单代码：

module/src/main/java/com/example/directory/path

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

• 步骤5）查看在Inspect中进行调整时会发生什么。 （一些 可能需要尝试尝试尝试。）请注意 textarea现在有宽度相同的宽度问题：100％; 禁用。

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

• 步骤7）查看显示。如果看起来不错，请尝试进行适用 更改为CSS定义，然后重新测试更改。

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

祝你好运。

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