How to center a note/plugin in the sidebar?

[celly12343]

What I’m trying to do
I’m trying to center a note/plugin within my sidebar. I have a note with only a flashcard on it that I want to use as a sort of word/phrase of the day. However, the differing sizes of phrases overflow the note container. Can someone please point me to the CSS property I need to edit to keep the content centered within the container, even when the sidebar size or word/phrase length changes?

What I’ve Tried
I’m not very familiar with CSS, so any guidance would be appreciated. I’ve written a small CSS snippet, removing the scrollbar, hiding the metadata, and adjusting font size, but haven’t achieved the desired result.

Is what I’m trying to do possible, or is it too complex? If it’s not feasible, I’m happy to abandon the idea.

Any help or guidance on how I should handle this would be much appreciated.

[ariehen]

It sounds doable, but knowing a bit more about the setup is needed for folks to be able to offer suggestions or point you in the right direction.

• What community theme are you using?
• What’s the source of one of those notes? Paste it in a code block here (using, at least, four backticks above and below if the plugin itself is in a code block).
• What plugin is being used in the note? Anki?
• Are you are looking to affect all notes pinned in the sidebar or only certain ones?

[celly12343]

Thank you for getting back to me.
Community Theme: Shiba Inu by Farouk
plugin: Vocabulary View (GitHub - nnshi-s/obsidian-vocabulary-view-plugin)
Only certain notes with “spanishflash” as a cssclasses property

Below is a snippet of the code block. I just copy and paste the words/phrases into the plugin.
(I have a dataviewjs query that aggregates all the words/phrases that have a particular tag, and lists them on a separate note. I couldn’t find a way to directly export the results into this plugin so I just copy and paste them in there manually)

Nepenthe : (noun) a drug described in Homer's Odyssey as banishing grief or trouble from a person's mind.
Encomium : (noun) a speech or piece of writing that praises someone or something highly.

[ariehen]

Using the Shiba Inu theme, the vocabulary-view plugin installed, and a note in the sidebar with this content:

### vocab-view

```vocaview-list3
word1: explanation1
word2: explanation2
```

this is what I see in the sidebar:

It looks fairly typical and centered to me. Maybe there’s some other CSS at play or something set in Style Settings?

---

That said, you could try this as a first pass to shift things around a bit, remove the inline title, and remove the Properties container. The note:

---
cssclasses:
  - spanishflash
---

### vocab-view

```vocaview-list3
word1: explanation1
word2: explanation2
```

the CSS:

.workspace-split:is(.mod-left-split, .mod-right-split) 
:is(.markdown-source-view.mod-cm6.spanishflash > .cm-editor > .cm-scroller, .markdown-preview-view.spanishflash)  {
    --file-margins: 0px 20px 10px 20px; /* top-right-bottom-left */
    
    & .inline-title {
        display: none;
    }
    & .metadata-container {
        display: none;
    }
}

[celly12343]

Thanks again for your help. I added the above to my working CSS file. It looks like the features were added. Its definitely more comfy and moved me in the right direction. To be more specific, my sidebar doesn’t have too much room but I prefer its current configuration. As in there is a larger plugin above that allows me to switch plugins like a calendar or task list, and then below 2 flashcard notes.

What I’m looking for is upon changing the vertical size of the note’s container

or if the word-phrases featured is longer than usual,

I would like the note contents to dynamically adjust to keep the notes contents within view and not shift everything up or down out of view. Maybe it should zoom out? Sorry if I wasn’t clearer earlier. Again if this isn’t feasible I’ll make do but I truly appreciate the help, I just don’t want to pull my hair out .