Docs

[Wardo_SD]

Hello!
I am having problems with the three column layout in gravity forms on my site. I used the standard two column css fix I found on the x forum to try to resolve the layout issue, but it didn’t work in this case. This is the CSS I added:

body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half, body .gform_wrapper .top_label li.gfield.gf_left_third, body .gform_wrapper .top_label li.gfield.gf_middle_third, body .gform_wrapper .top_label li.gfield.gf_right_third { float: none !important;}

Here is what I would like to achieve: I want first name, last name and phone number on the first row, event date, event type and number of guests on the second line, and the message on the third as a fullwidth row. I have attached a screenshot of the broken layout. What do you suggest?

Thanks for the help!!

[Wardo_SD]

This reply has been marked as private.

[Christian]

Hey Wardo,

Please add the code below in your Appearance > Customize > Custom > Global CSS

body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half, body .gform_wrapper .top_label li.gfield.gf_left_third, body .gform_wrapper .top_label li.gfield.gf_middle_third, body .gform_wrapper .top_label li.gfield.gf_right_third {
    float: none;
}

body .gform_wrapper .top_label input.small, body .gform_wrapper .top_label select.small, body .gform_wrapper .left_label input.small, body .gform_wrapper .left_label select.small, body .gform_wrapper .right_label input.small, body .gform_wrapper .right_label select.small {
    width: 100%;
}

@media only screen and (min-width: 641px) {
.gform_wrapper .top_label li.gfield.gf_left_third:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm), .gform_wrapper .top_label li.gfield.gf_middle_third:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm) {
    width: 29.3%;
}
}

Let us know how it goes.

Thanks.

[Wardo_SD]

Man, you guys are AWESOME!!
Thanks so much, it worked perfectly!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts