Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
6e1ad6797200414c8f2ad1c71c010e0c
Detailed steps to reproduce the bug
Scroll down to the section where it says “The innovative spirit…” and select that block of text. It should be an H2 but styled differently. However, any styles related to font-size, line-height, and font-weight are overridden by the user-agent stylesheet, which unfortunately prevents me from using any heading at all inside the rich text editor.
Screenshots or video link
Code stack you are integrating Builder with
NextJS
Reproducible code example
Not applicable
Hi @bcaylor10,
I noticed that you are using a local server and running into an issue where the user-agent stylesheet isn’t loading. I believe the problem may be related to the block of code that uses an h4 tag with a fixed font size of 36px, preventing other styles from being applied. To troubleshoot, you can try removing the font size and h4 tag from the code to see if that resolves the issue for you.
@manish-sharma so, I didn’t actually write the code itself. I highlighted the text in the rich text editor, selected Heading 4 (also tried Heading 2) and that’s how this issue came about. This is pretty crippling to a site since I need semantic headings. Currently my only workaround for this is to create a custom heading component.
Is what I’m doing in the rich text editor not how it’s supposed to work?
Hello @bcaylor10,
I want to let you know that everything seems to be working properly. However, the builder allows the user agent stylesheet to override styles applied by the builder based on CSS specificity. If it helps, you can certainly create a custom heading component of text type or richtext.
