H6 Bible verses snippet not working on newer versions of Minimal theme

[3mbry0]

Things I have tried

• Search on the forum and on Discord about this (haven’t found anything, but maybe didn’t search well enough)

What I’m trying to do

I use a CSS snippet I got from the Organising the Bible in Obsidian thread that transforms H6s into Bible verses:

I use the Minimal theme and the snippet has been working great up until 4.2.0 when the snippet no longer worked as intended, i.e., the verses are no longer visible (the screenshot above shows Minimal 4.1.9, and the one below uses the latest Minimal 5.0.0):

I tried the snippet with a bunch of themes including the default, and the verses are visible even after updating them, so this seems to be unique to Minimal both on desktop and mobile.

This is the snippet I use:

.markdown-preview-view h6
{
  position: relative !important;
  text-align: right !important;
  left: -101% !important;
  top: 27px !important;
  line-height: 0px !important;
  margin-top: -20px !important;
  margin-right: 3px !important;
  font-family: var(--font-family-preview) !important;
  font-weight: 500 !important !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

I have very very little knowledge of CSS, and that is why I’m asking for help on getting this snippet to work with later versions of Minimal. However, from playing a bit with the snippet, I found that when the H6 is vertically positioned far enough from its original position, it starts to disappear. In this case, the limit is very close to the original position that I can’t place the header beside the desired verse without it fading away. In the screenshot below, I positioned it close enough that you can see it only half visible; farther than this and it disappears:

Would really appreciate any help with this! Thank you so much

[eledah]

The snipped you provided works well on a vanilla version of Obsidian (v0.13.23) with Minimal theme (v5.1) installed. My guess is that some other snippet or style customization is interfering with your code.

If you are able to navigate through the dev console (cmd+ option + i), I suggest you check for the interference. If not, then disabling the snippets one by one and playing around with them should lead you to the cause.

[3mbry0]

Thanks for the response! You’re actually right. After process of elimination by deleting some parts of the Minimal.css file, I found that the issue has something to do with the Contextual Typography plugin, which was a recommended plugin to install for the latest versions of the theme. Turning the plugin off fixes the issue.

Adding this to the snippet also fixes the issue without having to turn off Contextual Typography:

.contextual-typography .markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  overflow: visible !important; }

The problem here was with the overflow property, which was set to hidden in the original Minimal.css:

.contextual-typography .markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  max-width: var(--max-width);
  width: var(--line-width-adaptive);
  overflow: hidden; }

Thanks again so much really appreciate it