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

【问题标题】：How to make Gravity Forms Responsive (left/right )?如何使重力形式响应（左/右）？
【发布时间】：2013-01-12 08:05:15
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css forms responsive-design

【解决方案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%;
  }

}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;;
      }

【讨论】：