Builder Is Adding Margin: 0 To First Paragraph

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
Sorry I don’t want this publicly listed

What are you trying to accomplish
Create multiple paragraphs in text box

Screenshots or video link
I will gladly provide this but not publicly.

Code stack you are integrating Builder with
Astro and GraphQL

Reproducible code example
Create a textbox, add multiple paragraphs (be sure to enter between each), and publish it.

View the source and the first paragraph will have the following css:

.builder-paragraph:first-of-type {
   margin: 0;
}
1 Like

Hi there,
Thanks for reaching out!
Would you be able to provide us with a screenshot of how you are experiencing this style on your page?
If you add the text box inside of a box element, are you able to modify the margin/padding to suit your design?


See attached. Notice how the margin is 0 only after the first paragraph.

This post talks about it as well:

Obviously the solution provided there isn’t very satisfying. I hope they eventually remove this CSS. Whatever its intended purpose, it’s way too heavy-handed, and it’s annoying to have to work around it.

1 Like

~ Sent feedback on this to the Builder team! :pray:

1 Like

I’m using Astro and not Shopify. However, I wanted to let you know this did not work.

I agree with you though. This specific ccss styling is too heavy-handed.

I was able to get around this behavior by throwing in an is:inline directive on the Astro style tag with the p:first-of-type recommendation. I’m not sure why Builder is forcing margin:0 on the first paragraph but it definitely threw a wrench in to my workflow. It would be nice if this was configurable.

This is still an issue. This (and other emotion css styles) are overriding my default

tag styles that I want to set for all

tags on the page.