Docs

[Simon T]

Hey Guys,

I’m trying to set my gravity forms to have two columns by adding CSS classes of gf_left_half and gf_right_half but the form is still displaying as one column.

I asked the GF support team for advice and their response is below. Can someone please advise:

“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://77.104.142.77/~webstein/sportingedge.co.nz/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/x9amefiz867d5sc/Screenshot%202016-08-06%2011.34.37.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”

[Simon T]

This reply has been marked as private.

[Thai]

Hi There,

You can override that CSS by adding the following CSS under Customizer > 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;
}

Hope it helps 🙂

[Simon T]

Thank you Thai,

How do I set the size of the input boxes to be all the same?

[Thai]

Hi There,

Please add the following CSS:

.gform_body .gform_fields .gfield .gfield_select {
    height: 53px !important;
    color: #000 !important;
}

Hope it helps 🙂

[Simon T]

Hey guys, I have moved the website to clients hosting (www.sportingedge.co.nz) and the code below no longer works to make the fields the same size. Any idea why?

.gform_body .gform_fields .gfield .gfield_select {
height: 53px !important;
color: #000 !important;
}

[Christopher]

Hi there,

I would like to check your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[Simon T]

This reply has been marked as private.

[Christopher]

Please provide us with authentication credentials.

Thanks.

[Simon T]

Sorry I’m not sure what you mean?

[Christopher]

Please see the attachment.
Thanks.

[Simon T]

Please try again now?

[Christopher]

Still asks for authentication credentials.

Thanks.

[Simon T]

Hi Christopher, I have asked my host about this and they were unable to tell me why you are getting that message. Another support staff member Rupok seems to be getting into my website ok (on another support ticket)

Could someone else at your end try perhaps? Sorry for the hassle…

[Lely]

Hi Simon,

Upon checking, that custom CSS is working. See attached screenshot.

***Update: Sorry I did check the test site and not the live site. Same with Christopher, I got the same issue. We need authentication credentials to access your live site.

[Author]

Posts