如何在 Yootheme 站点中使 Joomla 2.5 表单响应？

Question

表格：http://www.pawsingoodcare.com/contact-us Joomla 2.5.19，Yootheme Nano。

表单按照客户想要的方式设置和工作 - 有一个例外：在智能手机大小的视口上查看时表单中断。

我已经能够使用主题中内置的 custom.css 来编辑表单的其他部分。示例：

h3 { font-size: 18px; line-height: 18px; display:none;}

我什至可以通过使用来操纵表单宽度

#system .item > *:last-child {
margin-bottom: 0;
width: 100%;
   }

但是，我尝试过使用媒体查询示例：

@media only screen 
and (min-width : 321px) {
width:50%;
min-width:200px;
   }

问：如何让表单响应式？

Answer 1

正如@Kheema 所说，我们收到拒绝访问错误，这意味着可能有一些脚本正在运行，只允许您的 IP 地址查看该站点。

至于您的媒体查询，您无法正常工作的原因是您尚未定义将样式应用于哪个元素。看看这个：

@media only screen 
and (min-device-width : 321px)     /* define the min width */
and (max-device-width : 768px) {   /* define the max width */

    input, textarea {              /* define the element */
        width: 100%;
    }
    /* continue adding more code */

}

Answer 2

我收到拒绝访问警报，所以不确定您在页面中使用了哪些元标记..

你是否厌倦了使用这种方式。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
/* Styles */
}