---
title: "Custom CSS — Troubleshooting layout issues"
slug: "custom-css-troubleshooting"
updated: 2026-05-14T17:47:02Z
published: 2026-05-14T17:47:02Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.userflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```plaintext
/* 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.