Heading Spacing in Preview Mode

[Ceralynx]

Things I have tried

I have tried digging through the CSS files of my theme I downloaded, changing attributes and trying to add some to see if it will work.

What I’m trying to do

I would like the spacing to be less in preview mode. I don’t know much CSS, but I’m guessing there must be some attribute I don’t know the name of that can fix it. Here is the CSS below for the headers.

Also for some reason the 6th header is the only one with markdown-preview in it, and I’m guessing I can use that to adjust the spacing in preview mode only for all of the headers.

.cm-header-1,
h1 {
  color: var(--accent-1);
}

.cm-header-2,
h2 {
  color: var(--accent-2);
}

.cm-header-3,
h3 {
  color: var(--accent-3);
}

.cm-header-4,
h4 {
  color: var(--accent-4);
}

.cm-header-5,
h5 {
  color: var(--accent-5);
}

.cm-header-6,
.markdown-preview-view h6 {
  color: var(--accent-6);
}

[andrezgz]

It would be great if you share the theme you downloaded, and maybe the css files, to review them and help you with your needs.

[Ceralynx]

I used the “Spectrum” Obsidian Theme by Wiktoria Mielcarek.

Here is the entire CSS folder below

Spectrum.css (30.8 KB)

[andrezgz]

Checking the skin I’ve found it uses display:flex with column direction for div elements layout:

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

A quick fix would be to remove that rule from the theme css. A clean way to to this is by defining a css snippet to override this behavior with this rule:

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  display: block !important;
}

Remember to activate the snippet after creating it!

With this fix in place the spacing in preview mode seems to be quite right:

I don’t know if there’s a better solution (maybe someone with more css skills can provide one). That’s the best I can do for now! Hope this helps!

[Ceralynx]

Sorry, I don’t really see much of a difference when I apply this, the spacing after the header and before the list is too big for me. I found a way to fix the bottom margin after the list!