代码之家 › 专栏 › 技术社区 › Emigriff

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

contact-form-7 css wordpress

Emigriff · 技术社区 · 8 年前

我正在使用联系人表格7作为本页右栏中的表格 http://ernielovespizza.com/get-in-touch/

它在台式机/平板电脑上看起来很好,但在移动设备上,“姓名”和“电子邮件”字段超出了右侧的屏幕,但“消息”字段很好。

有人知道为什么会发生这种情况,以及解决方法是什么吗?

这是我的表单代码:

<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构建了网站。

3 回复 | 直到 8 年前

Johannes 8 年前

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

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

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

JohnH 8 年前

简短回答:添加“宽度: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编辑之前,它对于诊断显示问题和尝试解决方案非常有用。

祝你好运

Adern Nerk 8 年前

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

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

推荐文章