I need css for font size and margins

Basement
1

As on screenshot:

1280×972 54.7 KB

On the left pane is editor, on the right preview
Why font size on the right pane is different from the one on the left?

And how to set values for the margins (arrows in red)? They are so wide.

Would be nice if someone could provide a nice screenshot with how certain elements are referred to in css.

This is what I pasted to custom.css

:root

/* normal text other than headings and code */
.cm-s-obsidian
{
  font-size: 40px;
}
{
    --font-size-normal:              40px;
    --font-size-code:                40px;
    --font-size-side-dock:           40px;
    --font-size-side-dock-title:     40px;
    --font-size-status-bar:          40px;
    --font-size-h1:                  60px;
    --font-size-h2:                  40px;
    --font-size-h3:                  40px;
    --font-size-h4:                  40px;
    --font-size-h5:                  40px;
    --font-size-h6:                  40px;
} 


/* normal text outside of headings and code of editor */
.cm-s-obsidian, .mod-single-child .cm-s-obsidian {
  font-size: var(--font-size-normal);
}

/* normal text outside of headings and code of preview */
.markdown-preview-view, .mod-single-child .markdown-preview-view {
  font-size: var(--font-size-normal);
}

/*preview padding too small*/
.theme-light .markdown-preview-view, .theme-light .mod-single-child .markdown-preview-view {
  font-size: var(--font-size-normal);
}

/* code blocks in preview */
pre code {
  font-size: var(--font-size-code) !important;
}

/* font-size of in-line block for preview */
.markdown-preview-view code
{
  font-size: var(--font-size-code);
}

/* Editor CodeBlock TEXT Appearance */
.cm-s-obsidian pre.HyperMD-codeblock {
  font-size: var(--font-size-code) !important;
}

.search-result-file-matches, .search-empty-state {
  font-size: var(--font-size-side-dock);
}

.workspace-leaf-content[data-type="tag"] .tag-pane-tag-count,
.workspace-leaf-content[data-type="tag"] .tag-pane-tag-text {  
  font-size: var(--font-size-side-dock);
}

.workspace-leaf-content[data-type="backlink"] .search-result-file-matches {
  font-size: var(--font-size-side-dock);
}

/* search result in backlink or file search */
.search-result-file-title {  
  font-size: var(--font-size-side-dock-title) ;
}

/*status-bar*/
.status-bar{
  font-size: var(--font-size-status-bar);
}

/* headings for editor and preview */
.cm-header-1, .markdown-preview-view h1
{
  font-size: var(--font-size-h1);
}

.cm-header-2, .markdown-preview-view h2
{
  font-size: var(--font-size-h2);
}

.cm-header-3, .markdown-preview-view h3
{
  font-size: var(--font-size-h3);
}

.cm-header-4, .markdown-preview-view h4
{
  font-size: var(--font-size-h4);
}

.cm-header-5, .markdown-preview-view h5
{
  font-size: var(--font-size-h5);
}

.cm-header-6, .markdown-preview-view h6
{
  font-size: var(--font-size-h6);
}
2

There is no definitive CSS guide because the app is in beta and the architecture may change. There are some resources you can review like this forum post. You can also download community themes and see how they are structured.

3

Aha. If there is no css to make text the same size in both edit and preview mode then this thread should be treated as bug report.

4

There is, you just need to set it for both modes. This is intentional, as many users leverage differences between edit and preview views.

5

Great news. But please, tell me where, what. Because I am not a programmer, so my skills are more or less copy paste level.

6

Sadly I can’t riddle it off of the top of my head, but it is available elsewhere on the forum with some searching. It is worth reviewing the instructions linked by Sam above in using developer tools to identify exactly what you want to select and edit.

Or, perhaps you can try some of the community themes—maybe one of those already provides the styles you’re looking for.

Lastly, don’t miss the Editor → Readable Line Length option in preferences, as that might help solve your issue with margins!

7

I am aware that the program is still in beta but maybe it would be a good idea if developers could consider making one and the same value for both views, and put this option somewhere in options as it is done in other wiki type programs.

8

Have you tried Editor → Readable Line Length? That should be approx. what you’re looking for.

5 Likes