css - Gravity Forms をレスポンシブにする方法 (左/右)?

Question

Gravity Forms WordPress Form プラグインを使用しています。

それらは 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

エラークラスも覚えておいてください

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

Answer 3

@media クエリを使用して、それらのクラスの float を変更してみてください。このようなもの：

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