How to make strong pieces responsive (left / right)?

Question

I am using the Gravity Forms WordPress Form plugin.

They provide CSS classes, and I use gf_left_half and gf_right_half so that the fields align left and right on the same line.

How can I stack them up / down when dragging and dropping into a window (responsive / mobile view)?

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

Answer 1

If your theme is responsive, you most likely have your own css file, if you are not using 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 the @media query and change the float of these classes. Something like that:

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

Answer 3

Remember also error classes

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