Custom Gravity Forms – Columns styling

Custom Class Usage

Gravity Forms Custom CSS Link

Checkboxes and Lists Fields
gf_list_2col = 2 columned List
gf_list_3col = 3 columned List
gf_list_4col = 4 columned
gf_list_5col = 5 columned

Two Columns of Text Fields side by side
gf_left_half = The left column
gf_right_half = The right column

Three Columns side by side
gf_left_third = Left column
gf_middle_third = Middle column
gf_right_third = Right column

gf_inline
This places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.

—————————————–  CODE  ———————————–

CSS File

ul.gform_fields {
  // gravity form container
  .gform_wrapper .gform_body {
  	width: auto;
  }

  // labels
  .gfield .gfield_label,
  .ginput_container label {
  }

  // sub labels
  .gform_wrapper .field_sublabel_above .ginput_complex.ginput_container label {
  }

  // gform body
  .gform_wrapper .gform_body {
  	width: auto;
  }

}


// submission errors
  .gfield_error {
  }

// submit button
  .gform_button, input[type="submit"] {
  }

// submit hover, submit focus
  .gform_button:hover, input[type="submit"]:hover, .gform_button:focus, input[type="submit"]:focus {
  }