I’m trying to make a CSS snippet that in Reading view displays the contents of the note in 2 columns, like a recipe card. I’ve been trying to get something to work with this, but I’ve got all mixed up and can’t get it to work. Looking at the code in Developer view, there are so many classes that I don’t know which to use.
I see that there are plugins that might do it, but they require some special codes, and from what I’ve seen this should be possible with only a CSS snippet.
I think column-count, column-rule, and break-before: column should be the right combination.
How do I do the following?
- Note contents in 2 equal columns with a line between
- Only show columns in Reading view (and Edit Live Preview if possible)
- H1 is not in the columns
- The first H2 starts the columns
- The next H2 starts the second column.
Can anyone help? I feel like I’m so close, but it’s eluding me.