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

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

+6
source share
3 answers

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%; } } 
+8
source

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

0
source

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;; } 
0
source

All Articles