Docs

[jlhsolutions]

I have made a simple contact form. I applied the Gravity Form CSS classes to the Phone Number Fields and Email Fields, but they are not displaying correctly when the form is loaded on my page. When I go to preview the form in the form builder, it looks correct.

I want my (3) phone number fields (Mobile, Home, Work) to be on 1 line. I used the gf_left_third, gf_middle_third and gf_right_third hoping to accomplish this.

I want my (2) email fields (Home & Work) to be on 1 line. I used gf_left_half and gf_right_half.

I submitted a ticket with Gravity Forms and their response is below.

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:

/wp-content/themes/x/framework/css/dist/site/gravity_forms/icon.css

Gravity Forms 2.0 did 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, in particular, is causing the layout issue with fields using the classes:

https://www.dropbox.com/s/oajwrboomf66rag/Screenshot%202016-12-12%2019.08.38.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.

I am hoping that the next update to X will address the changes with Gravity Forms 2.0.

But in the meantime, is there something I can add to the custom CSS section that will fix this?

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts