移动联系表格

Question

我在网站上的这个联系表格上有点挣扎： http://www.sandhtestsite.kaylynnehatch.com/contact-us.html

我试图让它与移动设备一起使用（网站的其余部分使用CSS中的@mobile屏幕标记缩小）。

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

我尝试将@mobile屏幕与CSS中的#contactus元素一起使用，但它似乎不起作用。有什么建议吗？

Answer 1

您正在处理几个问题。让我们一个接一个地介绍它们：

1. 联系表单已加载到iframe中，这会使不必要的事情变得复杂。
2. textarea设置了cols="50"，这会将宽度扩展到移动设备屏幕的一侧。
除了规则fieldset之外，
3. width设置为320px padding: 20px。使用以下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