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

[NeilMelly (Neil M)]

Hi guys, appreciate your help, although I’m aware of those potential fixes. The issue is Lumos pulls a variable called ‘margin-bottom’ on rich text paragraph elements and this margin is eliminated if a paragraph is the last child in the rich text element, which helps keep spacing uniform across the site.

[AJ_Dev (from Memberstack)]

Hey @NeilMelly ,

You can probably add this class u-text-trim-off to the rich text element where you don’t want such styling to be applied (since you know that it would not be the last paragraph in your case).

This will remove such styling for the child elements of that rich text which is a paragraph in your project.

It will produce result as follows:

You can further customize it if you want more space between those etc., but basically the overlapping issue would be solved.

Hope this helps.

[NeilMelly (Neil M)]

Hey @AJ_Dev thanks for this.

I’d actually found the issue that was causing the paragraph overlap and I’ve fixed that, but now I’m getting ‘margin-bottom’ on the final child in the rich text which is throwing the spacing off between the last paragraph and any element below (see screen grab). In the Lumos global code embed, there’s a snippet that is meant to always remove bottom margin from the last child in a Rich Text element so I’m not sure if something has gone awry there?

Thanks for your help!

[AJ_Dev (from Memberstack)]

Hey @NeilMelly ,

I believe this is resolved now as when I check now I am not able to see any extra space below the last paragraph element.

[NeilMelly (Neil M)]

Hi @AJ_Dev, yes I’m on a bit of a deadline so I rolled back to a previous backup - was quicker to do that and re-do the work I lost.

Appreciate you taking the time to look at the issue!