Question

我有一个wordpress网站，我在此特定页面上使用联系表单。每个输入字段都有一个标题，例如＆＃34; Name＆＃34;，＆＃34; Email＆＃34;等等。它在任何桌面浏览器上看起来都很棒。但是当从iPhone上观看时，文字太过分了，并没有与它的输入框对齐。所以我尝试了以下内容：

.page-id-1656 .entry-content-p {
 width:40% !important;
}

这适用于文本，但问题是缩小了我所有的其他字段。所以输入框不再是我想要的尺寸。有没有办法只定位文本？

如果这有帮助，这里是输入字段的CSS：

.page-id-1656 .wpcf7-textarea {
   width:40% !important;
   height:100px !important;
   font-size:15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5px 5px 5px 5px;
   border-color:#adadad !important;
   outline:none !important;
}

或者有没有办法使用我尝试过但却阻止它的东西.wpcf7-textarea

编辑：查看源代码给了我这个类：wpcf7-form-control wpcf7-text

编辑2：Font scaling based on width of container似乎是我正在寻找的答案。我将这个问题留下来，因为它可能对其他人有所帮助。答案是将font-size更改为1vw而不是15px。将单位更改为vw允许根据使用它的设备调整字体。

Answer 1

好吧，你可以稍微提高CSS样式。我想在你的表单的标题中有某种类型的h1 / h2 / h3标签？只包含表单中文本的东西？

只需使用它来使CSS样式更准确：

.page-id-1656 .entry-content-p > h3 {
   width: 40% !important;
}

或者切换h3中的情况，但这里的重点是指定CSS样式的直接指针。从这个角度来看很难说HTML代码在表单中是什么样的，并为您提供了一段代码，但是你应该对此有所了解。

编辑：试试这个

.wpcf7 > form > p:first-child {
   width: 40% !important;
}

这似乎是CF7的一种常见结构。

我可以使这个字体有一个线宽，以便它继续在下一行吗？

1 个答案: