Why does space between paragraphs disappear on my page?

Technical Q&A

Topic summary

Issue: Paragraph spacing on a Shopify page disappears after saving/preview, merging multiple paragraphs into one.

Proposed solution (confirmed working for the original poster):

  • Add custom CSS in the theme’s stylesheet via Online Store > Themes > Edit code > Assets > theme.css.
  • Examples provided:
    • .PageContent.PageContent–narrow.Rte div p { line-height: 2 !important; }
    • .PageContent.PageContent–narrow.Rte p { line-height: 30px !important; }

Context/technical notes:

  • CSS (Cascading Style Sheets) controls visual spacing; line-height increases vertical space within paragraph lines. Alternatives include adding margin-bottom to p elements for space between paragraphs.

Follow-up and variants:

  • For themes without theme.css (e.g., Ride, Dawn), users asked where to place the CSS. One reply suggests adding it to base.css or targeting specific sections.
  • Alternative snippet shared: p { margin-bottom: 20px !important; } to ensure gaps between paragraphs.

Status:

  • Original issue resolved for the first user.
  • Guidance for themes lacking theme.css is partially addressed (use base.css or equivalent), but not fully confirmed by those users. Code snippets are central to the fix.
Summarized with AI on December 21. AI used: gpt-5.
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.PageContent.PageContent--narrow.Rte div p {
line-height: 2!important;
}
1 Like