css - 如何使重力形式响应（左/右）？

Question

我正在使用 Gravity Forms WordPress 表单插件。

他们提供 CSS 类，我使用 gf_left_half 和 gf_right_half 使字段在同一行上左右对齐。

当您在窗口中拖动时（响应式/移动视图），如何使它们堆叠在顶部/底部？

我的表格：http: //goo.gl/sDWLO

Answer 1

如果您的主题是响应式的，那么您很可能有一个自定义 css 文件，否则您可以使用此代码，只需在 @media 部分中声明所有响应式类定义即可。

@media only screen and (min-width: 200px) and (max-width: 768px) {

  .gform_wrapper .gform_body .top_label li.gfield.gf_right_half { 
    float: left; 
    clear: left !important;
    width: 99%;
  } 

  .gform_wrapper .gform_body .top_label li.gfield.gf_left_half { 
    float: left; 
    clear: left !important;
    width: 99%;
  }

}

Answer 2

尝试使用 @media 查询并更改这些类的浮点数。像这样的东西：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .gf_right_half { float: left; } }

Answer 3

也要记住错误类别

      .gform_wrapper .top_label li.gfield.gfield_error.gf_left_half,
      .gform_wrapper .top_label li.gfield.gfield_error.gf_right_half {
        float: left;
        clear: left !important;
        width: 99% !important;;
      }