How to make Gravity Forms Responsive (left/right )?

Question

I'm using the Gravity Forms WordPress Form plugin.

They provide CSS classes and I'm using gf_left_half and gf_right_half to make the fields align left and right on the same line.

How can I make them stack top/bottom when you drag in the window (responsive/mobile view)?

My form: http://goo.gl/sDWLO

Answer 1

If your theme is responsive you most likely have a custom css file if you don't you can use this code, just declare all your responsive class defs in the @media section.

@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

Try using an @media query and change the float of those classes. Something like this:

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

Answer 3

Remember the error classes too

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