.gsection CSS not over-writable

[Jmot]

Hi,

Since updating to the most recent version of PRO I noticed that the .gsection area in Gravity Forms can no longer be over-written by CSS. I have tried over-writing it in my child theme, in the site CSS, and in page-specific CSS.

I have been using this line of css specifically to overwrite it, which previously worked:

body .gform_wrapper .gform_body ul.gform_fields li.gfield.gsection {
margin-top: .5rem !important;
}

If you visit this page you’ll see the large gap in multiple locations in the form: https://freshfitstage.wpengine.com/boutique-studio/membership/

I’m not sure what else to do. Thanks for the help.

[christian]

Hey @Jmot,

That part is now being overridden by a declaration which has more precedence in our theme’s Gravity Forms stylesheet: /wp-content/themes/pro/framework/dist/css/site/gravity_forms/integrity-light.css

It can be overridden by adding making the selector more specific like adding an ID like this:

Add the code in the Global CSS or Content CSS by the way so that it will be outputted inline which in effect has more precedence the your custom.css or any external CSS.

Just note that your cache is very aggressive. If you don’t see the CSS work, clear all caches and deactivate all optimizations while you work on your styles.

Hope that helps.

[Jmot]

Thanks Christian. That worked great—don’t know why I didn’t think of that!

[nabeel]

Hey @Jmot,

You can learn more about CSS overriding and Specificity here https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

We’re glad we could help. Cheers!