Why are ankidroid cards so thin and how to override it with CSS?

[yagarea]

I imported this deck zbrojak.ggu.cz to my ankidroid app on my Android 14 phone.

The deck on desktop looks perfect but when I open it on myphone it looks like this:

this is the template:

<div class="note">
	<div class="card">
		{% for img in images %}
			{{ img }}
		{% endfor %}
		<h2>{{- question -}}</h2>
		<hr>
		{% for a in answers -%}
			<p class="answer">
				<b>{{- a[0] -}})&nbsp;</b>{{- a[1] -}}
			</p>
		{%- endfor %}
	</div>
	<footer>
		<p><abbr title="Vygenerováno {{ date -}}"><b>Otázka {{ name -}}</b><abbr></p>
		<p><a href="https://zbrojak.ggu.cz/">zbrojak.ggu.cz</a> + <a href="https://blackblog.cz/">BlackBlog.cz</a></p>
	</footer>
</div>

This is styles:

.note {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
}

.card {
	display: block;
	padding: 1em;
	max-width: 70%;
	width: 70%;
	margin: auto;
}

.answer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 1em;
	padding: 0.5em;

	font-size: 0.8em;
	border: 2px solid #000;
	border-radius: 10px;
	background-color: #1E90FF;
	color: white;
	text-align: left;
	font-size: 1.2em;
}

.correct-answer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 1em;
	padding: 0.5em;

	font-size: 0.8em;
	border: 2px dashed;
	border-color: #013220;
	border-radius: 10px;
	background-color: #008200;
	color: white;
	text-align: left;
	font-size: 1.2em;
}

.large-img {
	display: block;
	width: 100%;
	margin: auto;
	max-width: 600px;
	height: auto;
}


footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

a {
	text-decoration: underline;
}

h2 {
	text-align: justify;
}

/* Android */
.android, .android .note, .android .card, .android .answer, .android .correct-answer, .android body {
  width: 100%;
  padding: 2px;
}

The cards are supper narrow/thin.
How can I fix this so cards are wide as the screen?

[Danika_Dakika]

The screenshot will definitely help, so try that again. You should just be able to paste that into your message. Post both what it looks like on AnkiDroid, and the expected result, which you get on desktop.

The other thing we need to see is the templates for your note type – front, back, and styling – as text in a code/preformatted block, please.

[yagarea]

Yes, I tried that and all I get is this message:

Sorry, but your upload failed. Please try again.

Edit: I installed chromium and not it worked

[Danika_Dakika]

The other thing we need to see is the templates for your note type – front, back, and styling – as text in a code/preformatted block, please.

[yagarea]

I have eddited the question and added the code. Thank you for quick reply.

As you can see in CSS styles I tried to apply special rules for android using this:
docs.ankiweb (dot) net/templates/styling.html#platform-specific-css

[Danika_Dakika]

Thank you! It looks like our updates flew past each other. Hopefully someone will be able to help you with your CSS.

[Whar]

Tell me if this quick fix work or I’ll try again, I can’t check in my phone to see if it works until later (if I can before you answer, I’ll update the post).

Remove the width from .card:

.card {
	display: block;
	padding: 1em;
	max-width: 70%;
	margin: auto;
}

An in the android block replace width with max-width:

.android, .android .note, .android .card, .android .answer, .android .correct-answer, .android body {
  max-width: 100%;
  padding: 2px;
}

[yagarea]

Even when I remove all mentions of width it still looks same.

The current styles:

.note {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
}

.card {
	display: block;
	padding: 1em;
	margin: auto;
}

.answer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 1em;
	padding: 0.5em;

	font-size: 0.8em;
	border: 2px solid #000;
	border-radius: 10px;
	background-color: #1E90FF;
	color: white;
	text-align: left;
	font-size: 1.2em;
}

.correct-answer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;

	margin-top: 1em;
	padding: 0.5em;

	font-size: 0.8em;
	border: 2px dashed;
	border-color: #013220;
	border-radius: 10px;
	background-color: #008200;
	color: white;
	text-align: left;
	font-size: 1.2em;
}

.large-img {
	display: block;
	width: 100%;
	margin: auto;
	max-width: 600px;
	height: auto;
}


footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

a {
	text-decoration: underline;
}

h2 {
	text-align: justify;
}

/* Android */
.android, .android .note, .android .card, .android .answer, .android .correct-answer, .android body {
  padding: 2px;
}

[Whar]

Hi! I was able to check with my phone today, I found a solution. I mixed up the “widths” earlier (sorry!), I ditched the max-width for width this time and added another property:

.card {
	display: block;
	padding: 1em;
	width: 70%;
	margin: auto;
}

.android, .android .note, .android .card, .android .answer, .android .correct-answer, .android body {
 box-sizing: border-box;
 width: 100%;
 padding: 2px;
}

I added box-sizing: border-box; to avoid the card overflowing the screen. First, I played with the width % (you can too), but wasn’t able to find a nice value. This way, the card will match the phone’s screen width without worrying about margins.

Hope it works for you, here a not-so-nice screenshot: