Gravity Form CSS in Pro theme

Support
#1

what is the appropriate way to apply css to a Gravity Form using the Pro theme. I’ve applied css and it did not work. I’ve also looked through the forums and see several people having similar issues.

I’m attempting to apply the css found in this site: https://designtlc.com/turn-radio-buttons-big-buttons-gravity-form/

#2

Hello @morpheus,
Thanks for writing to us,
As per tutorial you need to add a custom class named gfp_big_button in Gravity form radio button element. Then add the CSS code in Theme Options --> CSS.

Gravity Forms is not a bundled plugin with Pro, but one of the supported plugins. Please remember that we don’t offer any support to any issues related to the third-party plugins.
Thanks

#3

Hi Prakash,

Thanks for your reply. The code works fine in the basic 2020 theme. The gf_list_linline css breaks when i switch to the Pro theme. Seems to be a theme issue and not a gravity forms issue.

#4

Hey @morpheus,

Our themes apply styling to the Gravity Forms radio button list. Please add the following code in Theme Options > CSS for now as I post this in our Issue Tracker to be queued for investigation by our development team and maybe they will provide an official solution for this in the coming updates.

.gform_wrapper li.gf_list_inline ul.gfield_checkbox li, .gform_wrapper li.gf_list_inline ul.gfield_radio li {
    display:inline-block !important;
}

Thanks.

#6

This helped move the buttons inline. thank you.

Also, i had to add !important to some of the other CSS elements in order to get them to work. Specifically, the padding on the buttons did not function until I added !important.

Thanks again.

#7

Hi @morpheus,

Great that it helps you. As you are trying to override the predefined CSS you need to add !important to overlook all other previous style rules on this selector.

Thanks

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.