Css snippet of indent only showing in Reading View

Changing the font size based on the Heading level is not good enough for me. I would like to indent it based on the heading level to jump out more. I have created a css snippet and it sizes the headings properly. And when I view it in reading mode it properly indents. But when working in preview view it doesn’t.

Things I have tried

My current css snippet is:

h1 {
font-size: 4em;
}
h2 {
font-size: 3.5em;
text-indent: 1rem;
}
h3{
font-size: 3em;
text-indent: 1em;
}
h4{
font-size: 2.5em;
text-indent: 3em;
}
h5{
font-size: 2em;
text-indent: 4em;
}

h1, h2, etc., are selectors for Reading view only. You need to add selectors to take care of Editing view as well. Give this a try:

.HyperMD-header-1, h1 {
    font-size: 4em;
}
.HyperMD-header-2, h2 {
    font-size: 3.5em;
    text-indent: 1rem;
}
.HyperMD-header-3, h3 {
    font-size: 3em;
    text-indent: 1em;
}
.HyperMD-header-4, h4 {
    font-size: 2.5em;
    text-indent: 3em;
}
.HyperMD-header-5, h5 {
    font-size: 2em;
    text-indent: 4em;
}

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