在手机上修复联系人表单7字段

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

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

您可能不需要 !important (先不要这样尝试),但如果没有这样做就不起作用,请添加它。

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

详细回答:下面是使用Chrome的Inspect功能解决此显示问题的一些步骤。

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

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

• 可以看到导致文本区域宽度正常的差异 而不是文本框。我注意到textarea有一些CSS 元素。所以我在Inspect中禁用了它,看看会发生什么。

• 步骤5)查看在Inspect中进行调整时发生的情况。(几个 为此,可能需要反复尝试。)请注意 textarea现在与宽度有相同的宽度问题:100%; 残废

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

• 步骤7)查看显示器。如果看起来还可以,尝试使 更改CSS定义,然后重新测试更改。

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

祝你好运

假设输入类型为文本(根据需要进行更改)。这段代码会起作用,

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