如何在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

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

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

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

Answer 2

正如@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 */

}