Need help with card-design "CSS box problem"

Anki Card Design
1

Hello, is someone so kind and can help me with my card design. I’m a beginner and got this simple design from the internet. Unfortunately I have no programming knowledge.

The “top card” works wonderfully. But with the “bottom card” I have the following problem. Unfortunately, as soon as I write two lines or the text is longer than the window width, the white-box no longer works correctly. Likewise when I work with the text “hide” function. Is there a way to fix this error?

Bildschirmfoto 2023-02-10 um 19.14.09
Bildschirmfoto 2023-02-10 um 19.14.091354×1520 66.6 KB

May i post the code here?

Sorry for my bad english. Hope you can understand it.

Greetings, skyline2sun

2

Sure, please paste the code in pre-formatted text (Shift + E)

In case you want to figure out yourself, here is the manual link: Card Templates - Anki Manual (There is subtopics e.g 6.3 Styling & HTML on the left side)

3

Many thanks for your response. The Problem is maybe the “.deutsch” code.

Here is the card-style code:

.card {
	font-family: calibri;
	font-size: 14x;
	text-align: left;
	margin: 60px 60px 60px 60px;
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 100%);
	background: url('') top left;
}

 
#TopBox {
	padding: 35px 35px 24px 30px;
	background: rgb(212,20,90);
	background: linear-gradient(90deg, rgba(212,20,90,1) 0%, rgba(251,176,56,1) 100%);
	border-radius: 20px;
	overflow: hidden;
	border-left: 6px solid #DDDDDD;
	border-bottom: 6px solid #AAAAAA
}
 
#BottomBox {
	padding: 35px 35px 24px 30px;
	background: rgb(85,108,241);
	background: linear-gradient(90deg, rgba(85,108,241,1) 0%, rgba(24,205,241,1) 100%);
	border-radius:20px;
	overflow: hidden;
	border-left: 6px solid #DDDDDD;
	border-bottom: 6px solid #AAAAAA
}

 
.japanisch,.sent {
	font-family: Helvetica;
	line-height:40px;
	font-weight: bold;
	font-size: 24px;
	color:#FFFFFF
}

.art {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: 600;
	padding:10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:10px;
	line-height:60px;
}

.lesung {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: 600;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:10px;
	line-height:60px;
}

.hinweis-japanisch {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: 600;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:10px;
	line-height:60px;
}
 
.höflichkeit {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:10px;
	line-height:60px;
}
 
.deutsch {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 24px;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:15px;
	line-height:60px;
}

.bild {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:15px;
	line-height:60px;
}

.bild-urheber {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 6px;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:15px;
	line-height:60px;
}

.anmerkung-deutsch {
	background:#FFFFFF;
	color:#333333;
	font-family: "Helvetica";
	font-size: 10px;
	font-weight: 600;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0 -5px;
	border-radius:10px;
	line-height:60px;
}

Here is the bottom card code:

<div id=TopBox>
	<span class=art>Wortart: {{Art}}</span>
	<br>
	<span class=höflichkeit>höfl.: {{Höflichkeit}}</span> <span class=lesung>Lesung: {{Lesung}}</span>
	<br>
	<span class=japanisch>{{furigana:Japanisch}}</span>
	<hr>
	<span class=hinweis-japanisch>Hinweis: {{kanji:Hinweis - Japanisch}}</span>
</div>
<br>
<br>
<div id=BottomBox>
	<span class=deutsch>{{Deutsch}}</span>
	<br>
	<span class=bild>{{Bild}}</span>
	<br>
	<span class=bild-urheber>{{Bild - Urheber}}</span>
</div>
4

Guys, could this be an Anki bug? I have already tried several solutions, but nothing changes with the problem of the torn white box and the word separation. Unfortunately, I’m not a programmer to understand what the error is. I can do without the box, but the broken word separation is unfortunately very annoying.

Edit:
It looks like it really is a bug! If I enter the text manually and without formatting in “Backside template” instead of {{German}}, everything works. It must be the code of the “German text field” in the database. If I copy and paste this there, I get the same problem again. What can I do about it?

Look here: https://codepen.io/skyline2sun/pen/QWVLxKm

5

All beginnings are difficult! But you seem to be on the right track! Also from me a warm welcome to the Anki community!

Maybe the following solves your problem:

#BottomBox > span {
  display:block;
}
alternative
#BottomBox > span {
  display:inline-block;
}
3 Likes
6

Thanks alot! That was the solution. But there is still a lot to learn about positioning, text appearance and text/line wrapping. Unfortunately it doesn’t work properly with the “hide” function because it then moves the white block. I’ll keep at it.

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.