Problems with CSS styling with Gravity forms

Support
#1

I am trying to get the form fields to line up next to each other across the page by using the gf_right_half and gf_left_half in the gravity forms CSS and it is not working. Below is the reply I have from gravity forms. So how do I fix this in X?

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.

https://www.rethinkeducation.org/wp-content/themes/x/framework/css/dist/site/gravity_forms/integrity-light.css

Gravity Forms 2.0 which was released in June 2016 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:

They are setting the float rule to left, Gravity Forms hasn’t used floats for the CSS Ready Classes for several versions 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 current version of Gravity Forms.

#2

Hi,

I will forward this to our web development team for review.

At the mean time you can try adding the code below in X > Launch > Options > 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 !important;
    display:inline-block !important;
}

Hope that helps