Hello everyone, since I wouldn’t know how to explain the problem, I recorded a video:
Hope the problem is well explained by the video. Please note that I disabled all plugins so I don’t thing the problem could be related to any of them.
Thanks for making a video!
- After disabling plugins, make sure to restart Obsidian so they unload properly.
- Did you also update your themes, and test with the default theme and no custom CSS snippets?
- What is your Obsidian installer version? It used to be that 0.15.9 was the last supported installer. But now, 1.1.9 also updated to the latest Electron. So if you haven’t, please try downloading and reinstalling Obsidian. The auto-updater can’t update that part of itself.
Release notes: Obsidian Release v1.1.9
Otherwise, please run “Show debug info” and paste the results here.
1 Like
Thank you for stepping by!
I uploaded the installer but problem persist… I don’t understand to be honest because if I create a new note this problem does not appear, as far as I’m concerned it appears only on one specific note (there are no dataview tables, tables or anything other than callouts, headings and text).
Since there’s 0 replicability with the problem I’ll just report if it will appear on other notes.
Can you paste the exact Markdown here, and put it in between ``` triple backticks?
I can try to copy it into a note and see if it happens here.
Hello again, apparently I found the problem, it was this snippet:
/* HeadingSPACING*/
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h1,h2) {
line-height: 1em !important;
margin:10px 0px 10px 0px !important;
padding: 10px 0px 10px 0px !important;
}
/* HeadingSPACING*/
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h4,h5,h6) {
line-height: 1em !important;
margin:1px 0px 1px 0px !important;
padding: 1px 0px 1px 0px !important;
}
/* HeadingSPACING */
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h3) {
line-height: 1em !important;
margin:5px 0px 5px 0px !important;
padding: 5px 0px 5px 0px !important;
}
1 Like
Since this snippet causes problems, is there anyone that know’s a way to fix it? Basically I would like to have headings padding equal size on reading and live-preview.
Anyone?
Hey ironhak 
This will make equal padding for all headers - both reading + editor mode:
/* all headers - both reading + editor mode: */
.cm-s-obsidian .cm-header, .markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
padding: 5px 0px 5px 0px !important;
margin:5px 0px 5px 0px !important;
line-height: 1em !important;
width: fit-content;
color: coral;
}
[NOTE: color is also changed - so you can see it reaches all headers (you could change / delete that color line)] 
Hello, thank you so much.
Unfortunately this snippet interfere with another one that makes inline title, heading 1 and heading 2 centered:
/* Editor View */
.HyperMD-header.HyperMD-header-1 {
text-align: center;
}
.HyperMD-header.HyperMD-header-2 {
text-align: center;
}
/* Reading View */
.cm-header-1, .markdown-preview-view h1 {
text-align: center;
}
.cm-header-2, .markdown-preview-view h2 {
text-align: center;
}
.markdown-source-view .inline-title {
text-align: center;
}
.markdown-preview-view .inline-title {
text-align: center;
}
Wonder if there’s a way to solve the issue and merge everything in one single snippet. Thank you.
P.s: I’m no coder, and I ain’t know nothing about CSS, but why in som snippets there’s the “hyper.MD” and other times “.markdown-rendered” and other times “markdown-source-view”? What are all these differencies? Why not just something like “.markdown-live-preview” and “-markdown-reading-mode”?
Thank you again 
Edit: I noticed your snippet only modify reading mode, how to modify also live-preview mode without having that bug? Thank’s.
Okay, you want to merge everything into one snippet.
This will change the Inline-Title, and all Headers (in reading mode and live-preview):
/* change inline-title + all headers (both reading + editor mode) */
.HyperMD-header, .markdown-rendered :is(h1, h2, h3, h4, h5, h6), .inline-title {
padding: 5px 0px 5px 0px !important;
text-align: center !important;
line-height: 1em !important;
color: orange !important;
}
- “all headers” and “inline-title” will all be centered, orange, and with equal padding (5px top and bottom)
- you are correct: CSS snippets can conflict, so put this snippet at the bottom of your CSS sheet.
**
What are all the different names (“.markdown-rendered”, “markdown-source-view”, etc)?
There are many different class names, because there are many different visual Elements.
You can see the CSS styles that are creating your Obsidian app right now 
- click “View” in the top menu, then “Toggle Developer Tools”. This opens a new window (Developer Tools).
- In the top-left corner of that new window is a little arrow icon. Click that little arrow so it turns blue
- Now click something on the Obsidian app (for example, a Header).
When you do that - the Developer Tools window will show you:
- the name of the Element you selected in the left pane (for example,
.HyperMD-header) - all the CSS properties of that Element in the right pane (for example,
text-align: center;).
Here is an example of how it looks:
- in that example… I clicked the little arrow icon, then clicked “level 1” in Obsidian
- now you can see the Element name in the left pane ("Elements), and the new styles we added (padding, color, text-align) in the right pane (“Styles”)
**
You can also temporarily change the CSS properties… right there in DevTools… to see how different styles will look (for example, change color: orange to color: red).
It’s pretty fun to mess with CSS because you can change the appearance of almost everything.
So yeah, open Obsidian, then open Developer Tools (View > Toggle Developer Tools) and click around.
It’s fun to play with different styles, and you will learn a lot.
1 Like
Well, thank you very much! That is amazing.
Of course I suppose I can break down this snippet in order to achieve different styles for different headings, such as:
/* change inline-title + all headers (both reading + editor mode) */
.HyperMD-header, .markdown-rendered :is(h1, h2), .inline-title {
padding: 5px 0px 5px 0px !important;
text-align: center !important;
line-height: 1em !important;
color: orange !important;
}
/* change inline-title + all headers (both reading + editor mode) */
.HyperMD-header, .markdown-rendered :is(h3, h4, h5, h6) {
padding: 5px 0px 5px 0px !important;
text-align: center !important;
line-height: 1em !important;
color: purple !important;
}
Tough I was wondering why my initial snippet, this one:
/* HeadingSPACING*/
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h1,h2) {
line-height: 1em !important;
margin:10px 0px 10px 0px !important;
padding: 10px 0px 10px 0px !important;
}
/* HeadingSPACING*/
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h4,h5,h6) {
line-height: 1em !important;
margin:1px 0px 1px 0px !important;
padding: 1px 0px 1px 0px !important;
}
/* HeadingSPACING */
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h3) {
line-height: 1em !important;
margin:5px 0px 5px 0px !important;
padding: 5px 0px 5px 0px !important;
}
Was causing that bug of “jumping” cursor.
Thank you again for your wonderful explination
1 Like
1 - Yes, you can break down the CSS Selectors like that.
2 - The answer to your question is - I don’t think that ‘old snippet’ was the direct cause of the ‘Cursor jumping’.
And I’m glad you have it fixed now. 
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.