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

Question

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

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

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

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

Answer 1

如果您的主题是响应式的，则您很可能拥有自定义css文件 如果你不能，你可以使用这个代码，只需声明所有响应 @media部分中的类defs。

@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;;
      }