[Lindy_1Participant]

Hi, I have been using Gravity Forms for a couple of years now and I have never had this issue with other themes. I know how to build a form using some basic CSS to place the fields left. right and in the middle. I have checked the preview in Gravity Forms and it is correct however when I view the form in Cornerstone or the front end of the site the CSS isn’t working. The fields that I want sitting next to each other are sitting on top. Can you please help me in getting this to work. I have listed my log in on a private post.

cheers Kinnear

[Lindy_1Participant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

It’s mostly due to the recent update on Gravity Form that changed its structures and layout. It doesn’t match with the styling and classes anymore. We do add the gravity form element as part of the integration, but it doesn’t mean we can immediately handle the incompatibility caused by their frequent updates. All we could recommend is stay on the version that is still compatible until we find the proper solution 🙂

It looks okay when I checked on the cornerstone, but yes, the structure is messed up. Would you mind providing a mockup design of what we should expect, and maybe we can provide some CSS tweaks to fix it.

Thanks!

[Lindy_1Participant]

Hi thanks for your prompt response, I have attached a screen shot of the preview in GF. It is just a preview so the colours are incorrect and the page is full width but you will be able see what I’m trying to achieve, basically I want PHONE and EMAIL to be next to each other and FIRST NAME and LAST NAME.

If you could supply me with some CSS that would be greatly appreciated as I am a designer not a developer so my knowledge of code is very limited.

cheers Kinnear

[ChristopherModerator]

Hi there,

Please provide us with exact URL of page in question.

Thanks.

[Lindy_1Participant]

Hi

Gravity forms replied back to me with some CSS and it fixed the issue. I have pasted their reply for your information

Richard replied
Jul 25, 5:24am
Hi Kinnear,

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://test.upperyarra.net.au/wp-content/themes/x/framework/css/dist/site/gravity_forms/integrity-light.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/5xesjcmf08d5lqp/Screenshot%202016-07-25%2010.24.29.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,

__________________________________________

Richard Wawrzyniak

Gravity Forms Support Specialist
http://www.gravityforms.com

[Rue NelModerator]

Hello There,

We will be reporting this to our developers. Once they have it fixed, it will be updated and will be rolled out in our next update release. Please bear with us.

Thank you for your understanding.

[Lindy_1Participant]

In the next release once I have upgraded can I delete the CSS as I like to keep that limited? cheers Kinnear

[LelyModerator]

Hello Kinnear,

Yes, once we rolled out the update, feel free to delete those temporary CSS fix.

Cheers!

[Author]

Posts