Resize images in study mode

Card Design
1

Hi,

I tried to understand how to do it, even to copy what this tuto talk about :

But i cant figure out the way to make it work for me.

I’ve got MindMap that are apparently too big for the study view mode, i was expected the possibility to scroll, but no, it try just to fit with my screen without the possibility to read what’s written.

I’ve got +200images occlusion, and some of them are unreadable because of that.
I don’t have this issue in the edit mode.

Capture_anki img occlusion view mode
Capture_anki img occlusion view mode887×859 41.1 KB

Some of you know how could i make it bigger or juste as same width as in edit mode with a scrollbat ?

Best regards

2

Your images are displayed with a smaller height in the reviewer than in the editor, did I understand that correctly?

There’s probably a restriction for the max-height of your images in the Styling section of your card template, e.g.

img {
  max-height: 100vh;
}

or something similar.

You’d have to find and delete that CSS rule.

3

Yes that is it, can’t see because it’s too small, and no option to scroll if bigger size

here is the code of the style “images occlusion”

/* GENERAL CARD STYLE */
.card {
font-family: “Helvetica LT Std”, Helvetica, Arial, Sans;
font-size: 150%;
text-align: center;
color: black;
background-color: white;
}

/* OCCLUSION CSS START - don’t edit this */
#io-overlay {
position:absolute;
top:0;
width:100%;
z-index:3
}

#io-original {
position:relative;
top:0;
width:100%;
z-index:2;
visibility: hidden;
}

#io-wrapper {
position:relative;
width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
font-size: 1.1em;
margin-bottom: 0.2em;
}

#io-footer{
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0.8em;
font-style: italic;
}

#io-extra-wrapper{
/* the wrapper is needed to center the
left-aligned blocks below it */
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
}

#io-extra{
text-align:center;
display: inline-block;
}

.io-extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}

.io-field-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}

#io-revl-btn {
font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {
font-size: 120%;
margin: 0;
}

.mobile #io-extra-wrapper {
width: 95%;
}

.mobile #io-revl-btn {
font-size: 0.8em;
}

I tried to modified each “width” but with no positive effect

4 
img {
  max-width: 100%;
  min-width: 100%; 
  width: 100%;
  max-height: initial !important;
}

Add this to the styling section of your Image Occlusion enhanced template.
It’ll make the image fit to the width of the screen, and you’ll be able scroll through the image vertically.
The max-height: initial !important; is needed because it’s set to 90vh from the anki reviewer’s default css.
I found this snippet from a previous reply, used this a long time ago and haven’t tested it again though so let me know if it doesn’t work.

1 Like
5

:heart_eyes:
thanks ! it works well. It may be take a bit longer (scrolling time) but i can now read everything

image
image1279×911 92.9 KB

I’m very gratefull, i was waiting for reviewing them but know, let’s go !