Gravity Forms CSS Not Working

[MtnStreamGroup]

I have created a new installation using X v5.2.5 and Gravity Forms v2.2.5.11. I have fields with gf_left_half and gf_right_half in the custom CSS class. It worked correctly with X v5.2.4. However, when I imported the form into the new installation the fields are stacked instead of being side by side. What could be causing this?

[christopher]

Hi there,

It might be caused by the fact that in the new version some of the elements are wrapped in a parent tag such as DIV tags to fix few side effects.

I wonder if you can give me the URL of the page which you have the form alongside the URL/USER/PASS of your WordPress dashboard using the Secure Note functionality of the post to follow up the case for you.

If I were you I would add a class to the element that I used to add the Gravity Forms:

Then wrap all the CSS codes inside the class, for example:

.theform .gf_right_half {
/* YOUR CSS CODE HERE */
}

That should do the trick. Thank you.

[christopher]

Hi there,
I am not sure why Gravity forms added a set of CSS code to override the initial classes but I added the code below to X > Launch > Options > CSS and the problem is solved:

.gform_wrapper .top_label li.gfield.gf_left_half+.gform_footer, .gform_wrapper .top_label li.gfield.gf_left_half+li.gfield, .gform_wrapper .top_label li.gfield.gf_right_half+.gform_footer, .gform_wrapper .top_label li.gfield.gf_right_half+li.gfield {clear: initial;}

The rest of the styling and maintaining of the form is on your shoulders and outside of our support scope. But I suggest that you check the article below to get you started with the styling:

CSS Ready Classes for Gravity Forms | Gravity Forms

Thank you.