When you have managed to setup your contact form, order form or other form with Gravity Forms in two columns you will soon realize it is not responsive out of the box. You will need additional CSS to go from two columns to one column on smaller screen sizes.

Responsive Two Column Form with Gravity Forms

To make a two column Gravity Forms form resize to one column on smaller screen sizes you will need to add CSS like you would normally do for certain screen size specific styling. You will need to add media queries with CSS selector making the columns float left.

Here a snippet to do just that based on the answer by Brad on Stack Overflow here :

https://gist.github.com/jasperf/b7d57b06abe7c7748d42

The classes  .gf_left_half and .gf_right_half are GF (Gravity Forms) classes that help left and right align fields. The media query is needed to decide when to float these properly for certain screen sizes.

The actual media query can be adjusted to your liking of course, but for most situations this works just fine. For me it did.

For more Gravity Forms CSS Styling examples see this Gravity Forms document online.