Skip to content

Instantly share code, notes, and snippets.

Embed
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

This comment has been minimized.

Copy link

gogrw commented Jul 13, 2016

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

This comment has been minimized.

Copy link

Santoshah commented Aug 7, 2016

Thanks for the awesome time saving code 👍

Love you guys.

@Deftwun

This comment has been minimized.

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

This comment has been minimized.

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
You can’t perform that action at this time.