Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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;
}
gogrw commented Jul 13, 2016 edited

This works perfectly. Thanks for sharing!! The only thing I noticed is that the fields don't expand on single lines on a mobile device like the other gravity form fields do. This makes it a little complicated to fill out since it fits all 4 fields next to each other on one line. I figured out how to fix that problem, though:

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px){
    .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 0 0 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    }
}

Thanks for the awesome time saving code 👍

Love you guys.

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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment