Styling Conditioned Columns is possible?

Anki Desktop
1

Hello! I would like help regarding the CSS code. I use anki to read laws and big chunks of text so I was trying to change the layout of the card (cloze type) to display three columns on the back card (answer card), based on predetermined fields. The setup would be: column 1 with “Title” and “Text”, column 2 with “What I forgot” and “Observations”, and column 3 with “Notes”. I’m learning code from scratch, so I’m quite inexperienced in the subject. So far, I’ve come across .container { column-count: 2 }
and .card.field-01 { column-count: 2 }

The first (.container) contains the entire block of fields, and if I place it afterward to select only the lower fields, it still retains the first block, which would be the first column, as an upper block, and the lower fields are divided into columns. I wrote it like this on the back card:

<div class="container">

<div style='font-family: "Arial";font-weight: bold; font-size: 25px;color: gold; margin-top: 8px; margin-bottom: 10px'>{{Title}}</div>

{{edit:cloze:Text}}<br>

<div style='font-family: "Arial"; font-size: 16px;color: #a0a091;margin-top: 8px'>{{edit:Observations}}</div>

<div style='font-family: "Arial"; font-size: 17px;font-weight: bold; color: pink; margin-top: 8px'>{{edit:What I forgot}}</div>

<div style='font-family: "Arial"; font-size: 15px;color: #a0a091; margin-top:10px'>{{edit:Notes}}</div>

And I put .container { column-count: 2} on the styling section too.

The second (.card .field) isn’t working as I imagined it would, and I was wondering if it’s even possible to create columns with these conditions. I used the .card .field on the styling section, like below, but nothing happened

.card .field-Title,

.card .field-Text {

column-count: 3;

column-gap: 20px;

column-rule: 1px solid #ccc;

}

.card .field-Observations,

.card .field-What I forgot {

column-count: 3;

column-gap: 20px;

column-rule: 1px solid #ccc;

}

.card .field-Notes{

column-count: 3;

}

Either way, I would greatly appreciate any help provided!!

(Bellow is a scratch of what I was thinking)

rascunho
rascunho1852×886 8.03 KB

2

I know HTML slightly more than CSS (I don’t know either one with any depth) – so I would just use a 3 column table for this.

[Everything I know about either HTML or CSS I picked up here and there, I recommend https://www.w3schools.com/ for that. And whenever I want anything fancier, I just let a site like https://www.tablesgenerator.com/ build it for me!]

For example:

image
image806×257 7.56 KB

<table border="3" cellpadding="5" cellspacing="10" style="border:1px solid;min-height:200px;width:100%;min-width:600px">
<tbody><tr align="left" valign="text-top">
<td style="width:33%;">{{Title}}<br> <br>
{{Text}}</td>
<td style="width:33%;">{{What I forgot}}<br> <br>
{{Observations}}</td>
<td style="width:33%;">{{Notes}}</td>
</tr>
</tbody></table>
2 Likes
3

Nice. Very useful.