How do I reduce the space between the heading and text of Rich Text section in Dawn theme?
Topic summary
Issue: Reduce the vertical gap between the heading and text in Dawn theme’s Rich Text section.
Earlier attempts:
- CSS added to base.css (.rich-text__text.rte…) with padding-top: 20px had no effect.
- Helper requested store URL, but the site isn’t live, limiting inspection.
- Suggestion to edit rich-text.liquid increased top padding instead of reducing the gap.
Proposed fixes:
- Quick workaround: margin-top: -5px; (negative margin) to pull content up.
- More targeted approach: in section-rich-text.css add
.rich-text__blocks > * + * { margin-top: 0px !important; }
Adjust the px value as needed. This directly controls spacing between stacked blocks (e.g., heading and text) and may override theme defaults via !important.
Status/outcome:
- No confirmation that spacing was successfully reduced; thread remains open.
- Next steps: apply the targeted CSS in section-rich-text.css, adjust values, preview, and publish if satisfied.
Please share your store url.
Hello @StanleyTse ,
- Log in to Shopify Admin.
- Navigate to Online Store > Themes > Actions > Edit Code.
- Open “base.css” file.
- Paste CSS code at the bottom.
- Save changes.
- Preview and publish if satisfied.
.rich-text__text.rte.scroll-trigger.animate--slide-in.scroll-trigger--design-mode {
padding-top: 20px;
}
Thanks!
Please share your website url?
It’s in desiging stage and yet to live …
Share your website url, then i check the problem
the code above even increase the top padding of the text, not reducing the space between the heading and the text…sorry
Paste this code
margin-top: -5px;
Hello @StanleyTse,
-
Log in to Shopify Admin.
-
Navigate to Online Store > Themes > Actions > Edit Code.
-
Open “section-rich-text.css” file.
-
Paste CSS code at the bottom.
-
Save changes.
-
Preview and publish if satisfied.
You can adjust the px value according to your requirements.
.rich-text__blocks > * + * {
margin-top: 0px !important;
}