Skip to content

Instantly share code, notes, and snippets.

@WebEndevSnippets
Last active April 18, 2018 12:08
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save WebEndevSnippets/5555354 to your computer and use it in GitHub Desktop.
Save WebEndevSnippets/5555354 to your computer and use it in GitHub Desktop.
Gravity Forms: 4 Column CSS
/* 4 column Gravity Forms custom ready class ------------------------------------------------------*/
.gform_wrapper .top_label li.gfield.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter {
margin:0 0 8px 0;
width:24%;
}
.gform_wrapper .top_label li.gfield.gfield_error.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
width:21%;
}
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
margin-right:1%;
}
.gform_wrapper .top_label li.gfield.gf_first_quarter {
float:left;
clear:left!important;
}
.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter {
float:left;
margin-left:2%;
clear:none!important;
}
.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
margin-left:3%;
}
.gform_wrapper .top_label li.gfield.gf_first_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.large {
width:95%;
}
.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gsection,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gsection {
padding:16px 0 8px 0;
}
.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_second_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+li.gfield {
clear:both;
}
.gform_wrapper .top_label li.gfield.gf_first_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_second_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_third_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+.gform_footer {
clear:both;
}
@Deftwun
Copy link

Deftwun commented Sep 18, 2016

Things don't line up quite right when you have 4 columns and you want a field underneath that stretches the width of the form. (Maybe just my theme?) I added a gf_full_width class and things seem to work OK for now.

.gform_wrapper .top_label li.gfield.gf_full_width input.medium,
.gform_wrapper .top_label li.gfield.gf_full_width input.large,
.gform_wrapper .top_label li.gfield.gf_full_width select.medium,
.gform_wrapper .top_label li.gfield.gf_full_width select.large{
    width:95%;
}

@j3rman
Copy link

j3rman commented Jun 22, 2017

how would one convert this to an 8 column layout? Is that possible?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment