How to adjust heading margins in both preview and reader mode when folded?

Hello everyone! This picture shows my current issue:

Simply put, I would like to be able to increase the space between these headers in both preview and reading mode when they’re collapsed. Mainly, I want this for Heading 1. I’ve tried a few CSS snippets I found on the forums, but none of them were what I was looking for. I would greatly appreciate if someone has a solution to this.

This will add space after folded headers - in Reader View + Edit View:

/* space between folded headers - reader view + edit view */
.is-collapsed > :is(h1, h2, h3, h4, h5, h6),
.HyperMD-header > .cm-fold-indicator.is-collapsed ~ .cm-widgetBuffer:last-of-type { 
    margin-bottom: 24px !important; 
}

:dove:

1 Like

I adjusted the title to match the terms used in the help docs. Here’s the original so people who use the other words can still find it: “How to adjust header margins in both preview and reader mode when collapsed?”

1 Like

How would you modify this CSS so it applies to folded headers only in Live Preview Mode?

@julroger2013 this will create space after folded headers in live-preview mode only :duck::

/* space between folded headers - live preview mode only */
.is-live-preview .HyperMD-header > .cm-fold-indicator.is-collapsed ~ .cm-widgetBuffer:last-of-type { 
    margin-bottom: 24px !important; 
}

How would I implement this CSS code in my existing theme?

Just so happens Zenmoto already provided a great write-up on how to use snippets :pray:t3:

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.