Docs

[nickohorny]

Hi there,

I am using gravity forms, and have recently been in touch with their support because there is some display issues.

Basically, in my form my fields have the gravity form css ready classes applied so they can simply fit nicely on one line, so using halves, and thirds. https://www.gravityhelp.com/css-ready-classes-for-gravity-forms/

My fields however are not doing this, and are all aligned left. Their support recently replied with the following on the matter:

Hi Nicholas,

I’m afraid the issue with the CSS Ready Classes is being caused by the theme which is including it’s own custom Gravity Forms stylesheet which is overriding the default styles:

http://businesscardbangkok.com/wp-content/themes/x/framework/css/dist/site/gravity_forms/renew.css

Gravity Forms 2.0 does include a lot of style changes so the theme developer would need to update their custom stylesheet so it is compatible with those changes.

This rule inparticular is causing the layout issue with fields using the gf_left_half and gf_right_half classes:

https://www.dropbox.com/s/bt5652liiha4l31/Screenshot%202016-08-18%2009.06.23.png?dl=0

They are setting the float rule to left, Gravity Forms no longer uses floats for the CSS Ready Classes as they are bad for responsive design.

You’ll need to contact the theme developer to see if they have an updated version of the theme compatible with the new version of Gravity Forms.

In the meantime adding the following to the theme stylesheet should temporarily fix the issue:

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

Regards,

Can you help please, my form is so long vertically, I just want the simple css ready classes applied so it is much tighter and shorter. Thanks.

http://businesscardbangkok.com/product/blue-curve/

[Lely]

Hi There,

Please try to add the following custom 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;
}

Hope this helps.

[Author]

Posts