Custom CSS — Troubleshooting layout issues

Troubleshooting custom CSS

CSS changes are affecting my entire app layout

Userflow applies your custom CSS in the context of your host page. If your CSS uses global selectors (e.g., body, div, p, *), those styles can affect elements outside of your Userflow flows — including your app's own layout.

How to scope your CSS to Userflow elements only:

All Userflow content is rendered inside elements with the class .userflow-root or within the Userflow shadow DOM (depending on your configuration). Prefix your CSS selectors to target only Userflow elements:

/* Instead of this (global — affects your whole app): */
p {
  font-size: 14px;
}

/* Use this (scoped to Userflow content only): */
.userflow-root p {
  font-size: 14px;
}

Common mistakes that cause layout bleed:

• Using * (universal selector) without scoping

• Resetting box-sizing, margin, or padding globally

• Overriding z-index on body or container elements

• Using !important on layout properties that cascade broadly

How to test your CSS safely:

1. Use your browser's DevTools to verify your CSS selector targets only .userflow-root elements before pasting it into Userflow.

2. Preview your flow on a representative page of your app before publishing to check for layout side effects.

3. Test on both desktop and mobile viewport sizes if your app is responsive.