Fix vertical line in desktop please

Anki Card Design
1

After new update vertical lines do not display in desktop only.
Before and after:

e2e08657-4d55-43dc-b666-5b8908c03596
e2e08657-4d55-43dc-b666-5b8908c035961438×831 66.5 KB

Descargas_5
Descargas_5982×404 14.3 KB

2

The font is different. Does that tell you something?

You should share the field’s HTML as well as the relevant parts in the template.

See the list in “When I print the back of my card, the text formatting isn’t preserved—line breaks and spacing are removed and everything runs together.” What do I do - #2 by Danika_Dakika.

3

Because the “before” pic was captured in phone.

<style>
.parrafos{display: flex;}
</style>

<FONT SIZE=10>
{{Kanji}}
<hr>

<div class="parrafos">

<p style="color:#0D8BB7;">
{{音èȘ­ăż}}
</p>

<hr>

<p style="color:#BC300D;">
{{èš“èȘ­ăż}}
</p>

</div>
4

I’m not a CSS expert, so I don’t know why that <hr> looked vertical before and it doesn’t work on AnkiDroid. So let me suggest to you a hacky alternative:

HTML:

<FONT SIZE=10>
{{Kanji}}
<hr>

<div class="parrafos"><span style="color:#0D8BB7;">{{音èȘ­ăż}}</span><span style="color:#BC300D;">{{èš“èȘ­ăż}}</span></div>

Styling:

.parrafos span:first-child {
  border-right: 1px solid white;
  padding: 5px; margin: 5px;
}
5

Try adding

hr {border-width: 1px; border-style: inset; height: auto; margin-inline: auto;}

to the style section. This should revert changes of hr styles in Anki’s reviewer css.

6

I suppose it’s because flexbox overrides sizing of its children. So the default hr’s 0-height rectangle gets collapsed horizontally (default “flex-grow” is 0) and stretched vertically to the full height of the container.
This is very non-standard use, however, so no wonder it is fragile. I’d say using a typical <div> element to draw a thin vertical rectangle with explicit dimensions would be a more future-proof solution.

7

It worked, thank you!