The Issue:
Divi and WordPress released an update that broke the way we styled and created gradient code with the new way they stack CSS style sheets. Previously, the text module in Divi made a div for that text module. So your text that’s in that module is wrapped in ‘p’ tag. In other words the breadcrumb would look like: div, .et_pb_text, then p tag text (or h2 tag). In Josefin and Anthem we were putting the CSS code in the module CSS area and therefore was automatically assigning it just to that module, row, or section. But with the latest updates, you now have to target the specific tag which cannot be done in the module.
How to fix it:
- Watch this video – it really does a good job of explaining the issues. Follow along and you’ll be alright! https://www.youtube.com/watch?v=cenl3vTmlu4
- Remove all classes and gradient CSS in the text module
- Add 2 classes to the text module (explained in the video)
- Add CSS in your style sheet that targets those classes
- Add a <span> to the gradient text. This is, 1) because we are now targeting that <span> in the CSS; and 2) so that if browsers do not support gradient text, there is a fallback color automatically.