移动联系表[关闭]

Question

我在我的网站上使用此联系表时遇到了一些困难： http://www.sandhtestsite.kaylynnehatch.com/contact-us.html

我正试图让它在移动设备上很好地工作（网站的其余部分使用 CSS 中的@mobile 屏幕标签缩小）。

表单本身是堆叠的，因此字段不需要浮动或任何东西，但我希望容器和 textarea 缩小以更好地适应移动屏幕。

我尝试在 CSS 中使用带有 #contactus 元素的 @mobile screen，但它似乎不起作用。有什么建议吗？

Answer 1

您正在处理几个问题。让我们一步一步来：

1. 联系表单被加载到iframe，这使事情变得不必要地复杂化。
2. textarea 具有 cols="50" 集，它正在将宽度从移动屏幕的一侧延伸出去。
3. 除了规则：padding: 20px，fieldset 设置为 320px 的 width。使用以下CSS，字段集将是360px 宽。

---

#contactus fieldset {
  width: 320px;
  padding: 20px;
  /* width (320px + (20px*2)) == 360px */
}

---

此外，您可能会发现 Firebug 或 Chrome / Safari 开发人员工具等开发人员工具在这种情况下必不可少。有了这些，您可以在观看设计的同时快速轻松地突出显示溢出屏幕的元素，实时更改 CSS。这是一个真正的节省时间。

关于 textarea 元素上的cols，这个问题也可能有帮助：sizing a textarea with CSS vs with cols and rows