html - 响应式设计和 Joomla 组件

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，框会变小。但是我该如何处理 responsive 呢？

我试过这个:

@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 */
}