Reading mode forces text next to left-aligned callouts

[ong891]

I added this little CSS snippet:

.callout {
float: left;
}

This made something that ought to look like this:

Look like this:

Truthfully speaking, giving up and mid-aligning the callouts would be the easiest solution, but I like this format and I would love to keep it.

Adding clear: both; just turns the whole line into the color of the box, which defeats the purpose of this cosmetic choice.

[ariehen]

I would look into efemkay’s excellent MCL snippet for a bunch of different options:

GitHub - efemkay/obsidian-modular-css-layout: CSS Layout hack for Obsidian.md

[ong891]

This looks incredible and is exactly what I was looking for. Thank you!

[ariehen]

Yeah, no reason to re-invent the wheel here as efemkay has done all the hard work for us.

Writing what you want to see can sometimes be fiddly to get the formatting correct, but stick with it. This is the morning/night bit at the bottom of the screenshot (the custom callouts aren’t active).

> [!multi-column]
>> [!blank]
>>> [!morning] Morning Routine
>>
>> - [ ] Item 1
>> - [ ] Item 2
>> - [ ] Item 3
>
>> [!blank]
>>> [!night] Night Routine
>>
>> - [ ] Item 1
>> - [ ] Item 2
>> - [ ] Item 3