Custom CSS not applied on Ankiweb but works on Mac

Anki Card Design
20

The differences are not caused by anything as drastic as differences in web engines. Card’s CSS is still getting applied, it’s just AnkiWeb has a few of its own styles, not encountered on other platforms, that sometimes can overwrite or paint over Card’s styling.

To remove AnkiWeb’s background coloring, for example, you can append the following to the styling of your Card, there is no need to change anything else:

body:has(#qa_box),
#qa_box.card {
	background: unset;
}

There are other AnkiWeb styles, affecting image sizing/vertical alignment/Card padding/etc., which I also had to deal with not so long ago. I think I managed to catch most of them, so if anything else is needed, I can try and extract the respective resets from my templates.

2 Likes