Can I adjust the indent of a bullet list in a rich text element in Webflow?
- Assign a custom class to the Rich Text element.
- Add custom CSS targeting that class to adjust indentation (e.g., using padding or margin).
- Publish the site to see the changes, as they won't appear in the Designer.
You can adjust the indent of a bullet list in a Rich Text element in Webflow, but it requires using custom CSS, since the Webflow Designer doesn’t offer direct controls for list indentation in Rich Text.
1. Add a Custom Class to the Rich Text Element
- Select the Rich Text element on the canvas.
- Assign it a unique class (e.g.,
custom-richtext) so you can target it with custom CSS.
2. Add Custom CSS via Embed or Page Settings
Use a Custom Code Embed component or go to your Page Settings → Inside
<head>section.Insert custom CSS to control indentation. Example:
To adjust left padding (indent), use:
custom-richtext ul { padding-left: 1.5rem; }To change individual list items:
custom-richtext li { margin-left: 0.5rem; }You can customize values to your desired indent (e.g., use
em,px, orremunits).
3. Publish to See the Changes
- Changes won't be visible in the Webflow Designer, only on the published site.
- Make sure to publish your site to preview the updated indent styles.
Summary
You can change the indent of bullet lists inside a Rich Text element by assigning a class and adding custom CSS targeting that class. This must be done via code, as the Designer doesn’t offer direct controls for list indentation.