in base.css at around line 201 there is
/* #Forms
================================================== */
css commands.
These css styles take precedence and interfere with the Ninja Forms display-opinions-light.css.
Not really sure the correct way to get Enfold and Ninja Forms to play nice together.
Do you have any ideas on how to fix this issue?
The quick and dirty way for was to delete the block related to form css from base.css but of course this is not great option given we stay updated to the latest enfold release.
This issue probably affects any other Form based plug-in Gravity, Formidable, etc…
The conflict goes back a long way with how enfold does css. You use #top and not just a .avia_top_content class. There is some sort of precedence given to ids over classes. So only way I could fix this is to take all the ninja form css and prefix them with #top so for example:
.nf-field-description {
width: 100%;
-ms-flex-order: 10;
order: 10;
}
becomes:
#top .nf-field-description {
width: 100%;
-ms-flex-order: 10;
order: 10;
}
Hi,
Were you able to fix this?
Best regards,
Jordan Shannon