Question

我正在为我的joomla网站构建表单，我遇到了问题。

这个div显示了一个基本输入：

<div class="ccms_form_element cfdiv_text" id="input_text_11_container_div" style="">
        <label>Nom*</label>
        <input maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_1" />
        <div class="clear"></div><div id="error-message-input_text_1"></div>
    </div>

在我的响应式设计中，我只想修改输入的大小，所以如果放置size=10，手动变得更小。但我如何处理响应？

我试过了：

@media screen and (max-width:460px) {
    input[type="text"] {
        width:50%;    
    }
    .cfdiv_text, .ccms_form_element, .cfdiv_datetime {
        width:50%;

      }
}

这不起作用..

感谢您的帮助：）

Answer 1

首先，您将在Css的主要代码底部定义此Css代码。

和媒体查询模板是：

@media only screen and (max-width : 460px) {
     /* Styles */
}

Answer 2

它第一次没有工作的唯一原因是因为css被其他css覆盖所以我只是在属性行的末尾添加！important，现在它工作正常:)：

input[type="text"], input[type="file"] {
    width: 60% !important;
  }

响应式设计和Joomla组件

2 个答案: