Snippet / Code module, child theme stylesheet, or Theme Options > Custom CSS

Scoped CSS in a Divi Code Module

A safer pattern for adding full selectors, keyframes, and media queries when a module's Custom CSS fields only expect declarations.

Use this when the snippet needs full CSS syntax. Divi module Custom CSS boxes often expect declarations for a specific element, not a complete stylesheet.

<style>
  .dfy-scope {
    --dfy-accent: #2563eb;
  }

  .dfy-scope .et_pb_button {
    border-color: var(--dfy-accent);
    background: var(--dfy-accent);
  }

  @media (max-width: 767px) {
    .dfy-scope .et_pb_button {
      width: 100%;
    }
  }
</style>

Notes

• Add dfy-scope to the section, row, or module wrapper you want to control.
• For reusable site-wide CSS, prefer Theme Options or a child theme stylesheet.
• Avoid fragile “escape” tricks in individual module fields unless you have tested the exact Divi version.

Sources

• https://diviengine.com/snippets/
• https://www.elegantthemes.com/documentation/divi/visual-builder/