Images without margins

[ospalh]

There was an issue opened at github, asking how to display images without any margins.

I think this is more a usage case than a bug in AnkiDroid, so i reply here.

Doing this is actually a bit tricky, as there are a few places where this margin can be set, and you have to UTSL to find some of them.
And i needed SuperStyler add-on to work out the details.


In the end i came up with this CSS:

.card {

font-family: 'Linux Biolinum O';

font-size: 24px;

text-align: center;

color: #657b83;

background-color: #fdf6e3;

margin: 1ex 0.5em;

}

.card img {max-width: 100%; max-height: none;}

.mobile .card img {max-width: 100%; max-height: none;}

.mobile .card {margin: 0.5ex 0em;}

.mobile #content {margin: 0.5ex 0em;}

It looks like you have to set the margin twice for AnkiDroid for it to work. Of course you can use just {margin: 0;}, but i still like a little vertical margin. Again, you can play around with the CSS using SuperStyle to find a style that matches your taste. (You may have to open a port in the firewall.)
The images are with and without the CSS tweaks.

[Lizz Gilmore]

This is absolutely lovely. Thank you so much! I had stumbled around with CSS in an attempt to get it working, but your approach does exactly what I wanted. Thank you!

[Tim]

Posted to the FAQ:

https://github.com/ankidroid/Anki-Android/wiki/FAQ#how-to-remove-the-margin-when-displaying-images

[ospalh]

Am Donnerstag, 1. Oktober 2015 02:00:07 UTC+2 schrieb Tim:

Posted to the FAQ:

https://github.com/ankidroid/Anki-Android/wiki/FAQ#how-to-remove-the-margin-when-displaying-images

Part of that style was just my taste. Maybe i'll try to come up with a minimal example.  I thin the non-obvious bit is the thing with the #content.