Docs

[hype]

This reply has been marked as private.

[Rad]

Hi there,

Please add these CSS,

.home #gform_1 #field_1_1, .home #gform_1 #field_1_3 {
    padding-right: 0;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
padding: 0 0.65em;
}

Thanks!

[ospahr]

Hi!

I used the first code, that was posted in custom css. I want to have the colums next to each other not below each other.
I cleared the cache, tried other browser etc.
I want to use class codes like gf_left_half / gf_right_half again.
As shown in the screenshot they are all below each other.

Thanks and regards
Isabella

[Jade]

Hi Isabella,

I have tried the code about and it seems to be working fine.

Please update it the previous code to this and see if it makes a difference:

.home #gform_1 #field_1_1, .home #gform_1 #field_1_3 {
    padding-right: 0;
}

.page-id-54 .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    padding: 0 0.65em;
}

Hope this helps.

[ospahr]

Hi Jade,
and thanks for the answer! Sorry, but my fields are still below each other – perhaps I am doing something wrong? As shown in the screenshot, I want those fields next to each other (two halfs).

Thanks again and best regards
Isabella

[Christopher]

Hi there,

Please add gf_left_half to gravity form fields that should float left and add gf_left_half to the fields that should float right.
You can add class under field settings/appearance/ custom css class.

Hope it helps.

[nolannp11]

Hi,
I used the following code and it worked of the 2 columns

body .gform_wrapper .top_label input.medium, body .gform_wrapper .top_label select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half {
    clear: none !important;
}

The problem I’m having is with the gf_left_third, gf_middle_third and gf_right_third classes. I’ve tried adding them to the code above, but can’t get it to work right. Any suggestions? Thanks!

website page http://dev.hospicehuronia.ca/volunteer-application/

[nolannp11]

Hi,
I used the following code and it worked of the 2 columns

body .gform_wrapper .top_label input.medium, body .gform_wrapper .top_label select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half {
    clear: none !important;
}

The problem I’m having is with the gf_left_third, gf_middle_third and gf_right_third classes. I’ve tried adding them to the code above, but can’t get it to work right. Any suggestions? Thanks!

website page http://dev.hospicehuronia.ca/volunteer-application/

[Rad]

Hi there,

Gravity Form fields are within <li></li> and that’s where the classes should be added. Looks like it’s a new implementation, adding it to field class will only affect the field and not the layout.

Would you mind providing your login credentials? I’ll check if it’s possible to be directly added to its wrapper instead of the fields.

Thanks!

[JvP]

Would Themeco kindly update their Gravity Forms CSS styles they ship with X in the next update? 🙂

That way we don’t have to fiddle around with custom CSS.

[Joao]

Hi There,

Thanks for your suggestion I will pass it on to the responsible sector.

Unfortunately we cannot provide an ETA

Thanks for understanding and please reach us if you need help with anything else.

Joao

[JvP]

Thanks Joao.

[Joao]

You are welcome!

[forgreenspa]

Hello, I have the same problems about column style with 3 columns.

The form is here: http://www.weforgreen.it/produzione/#sottoscrivi_produttore

I customized the css sheet as:

body .gform_wrapper .top_label input.medium,
body .gform_wrapper .top_label select.medium,
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 {
clear: none !important;
}

Looks at the attachment

Thanks

[Christopher]

Hi there,

Upon checking your site, I see that you’ve already achieved it.
Do you confirm that?

Thanks.

[Author]

Posts