Back styling - answer at bottom

Anki Card Design
1

How do I create a background color for the entire card? I’ve spent more than an hour on this, and nothing I do works. The {{Back}} answer always goes below the container div where I’m setting the background color. I think this is just a user failure in CSS but does anyone have a solution?

For my Back Template, I have:


	<div class="my-main">
		<div class="clue">{{FrontSide}}</div>

		<hr id=answer>

		<div class="my-answer">This is the back {{Back}}</div>
	</div>	

	<div class="extra-info">
		<div class="alt-form">Alt: {{Alt form}}</div>
		<div class="my-tags">Tags: {{Tags}}</div>
	</div>

</div>```

My CSS looks like this:
```.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	background-color: pink;
}

.my-main {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: beige;
}

.clue {
	margin-top: 20px;
	margin-bottom: 20px;
}

.type-field {
	background-color: orange;
}

.my-answer {
	background-color: lightgreen;
}

.extra-info {
	color: black;
	background-color: yellow;
}```
2
3

Thank you. I looked at that as you suggested (my third time now), got rid of all my background-color specifications and added “background-color: blue;” to .card, .card1 and .card2, but it didn’t work. The background is black (or nothing). Something in my CSS or HTML seems to be blocking it from working.

.card {
	margin: 0;
	padding: 0;
	background-color: blue;
}


.container {
	display: flex;
	flex-direction: column;
	/* height: 50vh;*/
	/*width: 100vw;*/
	/* background-color: beige;*/
	text-align: center;
	color: black;
}

.my-main {
    font-family: arial;
    font-size: 40px;
    text-align: center;
    color: black;
    /* background-color: beige; */
}

.clue {
	margin-top: 20px;
	margin-bottom: 20px;
}

.type-field {
	/*  background-color: orange; */
}

.my-answer {
	/* background-color: lightgreen; *.
}

.extra-info {
	text-align: left;
	color: black;
	background-color: yellow;
}


/* .card1 and .card2 are for the front and back */
.card1 {
	margin: 0; 
	padding: 0; 
	background-color: blue;
}
.card2 {
	margin: 0; 
	padding: 0; 
	background-color: blue;
}
4

Your template looks like this to me.
Imgur

Is this what you wanted?

5

Thank you for testing that out. Yes, that’s what I’m trying to get.

I’ve reduced my code to this:

Back Template:

<div class="clue">{{FrontSide}}</div>
<hr id=answer>
<div class="my-answer">{{Back}}</div>

and my styling to this:

.card2 {
	background-color: blue;
}

But my background is blank. (It looks like I can’t attach screenshots yet.)

I’ve tried “.card” and “.card2”. What am I doing wrong?

6 
https://imgur.com/

Send a screenshot with the link placed in the tag code.

Troubleshooting

You can also check how your card looks on ankiweb

Try creating a new note type and configuring it from scratch.

7

background: https://imgur.com/a/ncfe32r

8

I have completed the last message.

What is your theme?

Imgur

Imgur

1 Like
9

That was it! Not only did it fix the problem on my Mac, it fixed the problem on my iPhone as soon as I synced. Thank you so much!

10

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