Lumos - rich text paragraphs overlapping within Typography Paragraph component

[NeilMelly (Neil M)]

---

This is driving me mad, so hoping you guys can help…

I’ve been building in Lumos for several years and never had this before: When entering text into the Lumos Typography Paragraph component via the prop, my paragraphs are overlapping (see screen grab).

I must have changed something somewhere, but I can’t see what and I have compared everything within .u-text and .u-text .u-rich-text with the original Lumos cloneable and can’t see anything different.

I’ve also replaced the Lumos Global Styles and nothing has fixed it.

Read only link is below if anyone can help me not completely lose my mind!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[WebflowAIModerator]

Hi there!

To fix overlapping paragraphs in your design, you have two effective solutions:

The first is to adjust the bottom margin property on the All Paragraphs tag, which creates proper spacing between paragraphs. You can find this under the Style panel when you have the All Paragraphs tag selected.

The second solution is to adjust the line height in Typography settings. Using a unitless line height (for example, 1.6-) helps maintain consistent spacing between lines of text. Simply add a hyphen after your chosen value to make it unitless. This prevents text from overlapping within paragraphs themselves.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

[ahmed_moeed (Webflow Developer)]

@NeilMelly , here is the solution for your problem

you add a style in 3 ways

1- using code embed element in page (to target single page)

2- In page setting → custom code → head section (to target single page)

3- In site setting → custom code → Head code (to target all site)

<style>
.u-rich-text p {
margin-bottom: 30px;
}
</style>

you can change the margin as you required.

I have added this using code embed element in page