Preventing Ipad app to maximaze image width using Cloze-AnKing

kuba.raszka12 · November 6, 2021, 10:45am

I would like to ask you how can I change automatic image widening only in Ipad app when using Cloze-AnKing card? I looked at the HTML code of the card and I managed to change the image size on de

I am trying to modify Cloze-Anking pre-made note type to not to maximize image width on Ipad. It results in distortion and images are often unreadable. I have found how to change image width on the desktop app. It eludes me though how to do that for the Ipad app.

Advice or tips are highly appreciated, thanks.

The Styling of the card follows

/*The AnKing wishes you the best of luck! Be sure to check out our youtube channel for all things Anki and Pre-med/Med School related (including how to customize this card type and use these decks): www.AnKingMed.com */

/~~USER CUSTOMIZATION START~~~/

/* You can choose colors at www.htmlcolorcodes.com */

/* TIMER ON/OFF */

.timer { display: block; } /* ‘none’ or ‘block’ */

/* TAGS ON/OFF DESKTOP & MOBILE*/

#tags-container { display: block; } /* ‘none’ or ‘block’ */

.mobile #tags-container { display: block; } /* ‘none’ or ‘block’ */

/* MOVE TAGS UP FOR ‘NO-DISTRACTIONS’ ADD-ON */

#tags-container{ padding-bottom: 0px; } /* 0 normal, 55 to move up */

/FONT SIZE/

/* DESKTOP */ html

{ font-size: 24px; }

/* MOBILE */ .mobile

{ font-size: 18px; }

/* NOTE: anything with ‘px’ will keep a font that size indefinitely, ‘rem’ is a fraction of this size above and allows all text to change size with the above setting */

/IPAD ADJUSTMENTS/

.ipad .card, .ipad #extra {font-size:20px;}

.ipad .hints {font-size:18px;}

/HINT FONT SIZE/ .hints

{ font-size: .85rem; }

/FONT STYLE/

.card, kbd { font-family: Arial Greek, Arial; } /Step exam’s font is Arial Greek/

/MAX IMAGE HEIGHT/

img {max-height: 20rem; }

.card img {max-width: 60%!important; }

/* ~~COLORS~~ */

/DEFAULT TEXT COLOR/

.card { color: black; }

/BACKGROUND COLOR/

.card { background-color: #D1CFCE; }

#tags-container { background-color: transparent; }

/TIMER COUNTDOWN COLOR/

.timer { color: transparent; }

/* CLOZE COLOR */

.cloze { color: blue; }

/* “EXTRA” FIELD COLOR */

#extra { color: navy; }

/* HINT COLOR*/

a[href="#"] { color: blue; }

/* HINT REVEAL COLOR */

.hints { color: #4297F9; }

/* Missed Question Reveal Color */

#missed { color: red; }

#missed a[href="#"] { color: red!important; }

.nightMode #missed a[href="#"], .night_mode #missed a[href="#"] { color: red!important; }

/* ~~NIGHT MODE COLORS~~ */

/* NM DEFAULT TEXT COLOR*/

.nightMode.card, .night_mode .card

{ color: #FFFAFA !important; }

/* NM BACKGROUND COLOR*/

.nightMode.card, .night_mode .card { background-color: #272828 !important; }

/* NM CLOZE COLOR */

.nightMode .cloze, .night_mode .cloze { color: #4297F9!important; }

/* NM “EXTRA” FIELD COLOR */

.nightMode #extra, .night_mode #extra { color: magenta; }

/* NM HINT COLOR */

.nightMode a[href="#"], .night_mode a[href="#"] { color: #4297F9!important; }

/* NM HINT REVEAL COLOR */

.nightMode .hints, .night_mode .hints { color: cyan;}

/* COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE*/

b { color: inherit; }

u { color: inherit; }

i { color: inherit; }

/* ~~END CUSTOMIZATION~~ */

html { min-height: 100%; display: flex; flex-direction: column; }

#qa { margin-top: 15px; padding-bottom: 2rem; }

/* Formatting For Timer */

.timer {

font-size: 20px;

margin: 12em auto auto auto;

}

/* Styling For Whole Card*/

.card {

text-align: center;

font-size: 1rem;

height: 100%;

margin: 0px 15px;

flex-grow: 1;

padding-bottom: 1em;

}

.mobile .card { padding-bottom: 5em; }

/* Details For Images And Image Width */

.mobile .card img {max-width: 60%!important; }

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

.mobile #extra img, .mobile #missed img {max-width: 60%!important; }

/* Classes for individual cards */

.image40 img { width: 40%!important; }

.image50 img { width: 50%!important; }

.image60 img { width: 60%!important; }

.image70 img { width: 70%!important; }

.image80 img { width: 80%!important; }

.image90 img { width: 90%!important; }

.image40 img, .image50 img, .image60 img, .image70 img, .image80 img, .image90 img { display:block; margin-right:auto; margin-left: auto; }

.mobile .image40 img, .mobile .image50 img, .mobile .image60 img, .mobile .image70 img, .mobile .image80 img, .mobile .image90 img {width: auto!important;}

/Compatibility with Image Style Editor add-on/

.mobile {–w:100%;}

.card {–w:0%;}

/*Max image width for resize images in editor add-on */

.card [class^=ui-] img {max-width: 100%!important; }

/*Compatibility with resize images in editor add-on */

.resizer {min-width: 0%!important; }

.mobile .resizer {min-width:100%!important;}

/* Cloze format */

.cloze { font-weight: bold; }

/* Adjustments For Cloze Edit In Review On Mobile */

.clozefield, .mobile .editcloze { display: none; }

.editcloze, .mobile .clozefield { display: block; }

/* BEGIN HINT FIELDS */

/* Hint Link */

a[href="#"] {

font-style: italic;

padding: 0 !important;

}

/* Text When Hint Is Shown*/

.hints { font-style: italic; }

.hints + #extra { margin-top: 1rem; } /add spacing between hints and extra field/

/* END HINT FIELDS */

/* EXTRA FIELD */

#extra { font-style: italic; font-size: 1rem;}

/* Fix to make pop-up dictionary images the right size */

.qtip img {

max-width: 95% !important;

max-height: 95% !important;

}

/* Details for AnKing hyperlink image */

#pic { opacity: 0.0; }

#pic:hover { opacity: 1; transition: opacity 0.2s ease; }

.mobile #pic { display: none; }

/* TAGS */

/* Container To Fix Tags At Bottom Of Screen */

#tags-container{

position: fixed;

bottom: .5px;

width: 100%;

line-height: .45rem;

margin-left: -15px;

}

/* Clickable Tags (need to download the add-on) */

kbd {

display: inline-block;

letter-spacing: .2px;

font-weight: bold;

font-size: 12px !important;

text-shadow: none !important;

padding: 0.05rem 0.1rem !important;

margin: 1px -3px !important;

border-radius: 4px;

border-width: 1.5px !important;

border-style: solid;

background-color: transparent !important;

box-shadow: none !important;

opacity: 0.5;

vertical-align: middle;

}

/* Tag Becomes More Visible On Hover */

kbd:hover { opacity: 1; transition: opacity 0.2s ease; }

/* Tag Colors */

kbd:nth-of-type(1n+0) { border-color: #F44336; color: #F44336!important; }

kbd:nth-of-type(2n+0) { border-color: #9C27B0; color: #9C27B0!important; }

kbd:nth-of-type(3n+0) { border-color: #3F51B5; color: #3F51B5!important; }

kbd:nth-of-type(4n+0) { border-color: #03A9F4; color: #03A9F4!important; }

kbd:nth-of-type(5n+0) { border-color: #009688; color: #009688!important; }

kbd:nth-of-type(6n+0) { border-color: #C0CA33; color: #C0CA33!important; }

kbd:nth-of-type(7n+0) { border-color: #FF9800; color: #FF9800!important; }

kbd:nth-of-type(8n+0) { border-color: #FF5722; color: #FF5722!important; }

kbd:nth-of-type(9n+0) { border-color: #9E9E9E; color: #9E9E9E!important; }

kbd:nth-of-type(10n+0) { border-color: #607D8B; color: #607D8B!important; }

/* Tag Mobile Adjustments */

.mobile kbd { opacity: .9; margin: 1px !important; display: inline-block; font-size: 10px !important; }

.mobile #tags-container {line-height:0.6rem; margin-left: 0px; }

/AMBOSS UNDERLINE/

.amboss-mark { border-bottom: 2px solid #484a4a !important; padding-bottom: .2px; text-decoration: none !important; }

dae · November 8, 2021, 9:32am

@AnKingMed I’m not familiar with your card template - could you answer this one?

kuba.raszka12 · November 8, 2021, 4:30pm

I am sorry, which question I could answer?

BlackBeans · November 8, 2021, 4:46pm

None, he just asked the template author to pick up this thread. Btw, could you in the future put code within triple backticks so it formats nicely? Ie.

```
code
```

AnKingMed · November 8, 2021, 6:22pm

You should be able to use

.ipad img {
  max-height: none;
  max-width: 85%;
}

And set it to whatever you want. I’m not 100% sure though because that note type has changed a lot and we’re actually working on a newer version of it right now that will be beta tested on Patreon in the next week or two

BlueGreenMagick · November 9, 2021, 2:38am

May need to put !important after the value.

max-width: 85% !important;

kuba.raszka12 · November 14, 2021, 11:09am

I completely forgot it is latex, I will do it next time, thank you (y)

BlackBeans · November 14, 2021, 11:58am

I’m not sure what you are talking about…

LaTeX is a scientific / mathematical oriented formatting language. It is mainly used to write article, books or equations.
Markdown is a markup language, which is the one used in Discourse (ie. this forum)
CSS is style language mainly used in pair with HTML to render webviews.

You wrote about CSS code in Markdown (your original post), it has nothing to do with LaTeX, although the fact that Anki supports so many languages to format cards might be confusing.

kuba.raszka12 · November 14, 2021, 1:11pm

I apologize for the confusion.

What I meant was that I had’t realized that editing text in this forum was in Latex so I hadn’t used

this format for the code as I should have.

But I wrongly thought that forum’s editing language is LaTeX. It is Markdown as you have just written me. Thanks for explaning.

kuba.raszka12 · November 14, 2021, 3:28pm

I tried you proposed solution, also with @BlueGreenMagick tip but none of it worked. So I will just wait for the newer version of Cloze-Anking.
Thanks both @AnKingMed , @BlueGreenMagick

Topic		Replies	Views
Inconsistent font size in iPad and iPhone Help	6	1719	May 1, 2023
Unable to make Cloze cards in anki iOS app Help	5	291	July 21, 2023
Image occlusion: ,, No cloze found on card” Help	2	658	November 1, 2023
Images made using ipad apple pen are coming up small? Help	9	839	May 1, 2023
{{type:cloze:Text}} area not showing on Anki iOS app Help	11	2003	May 1, 2023

Preventing Ipad app to maximaze image width using Cloze-AnKing

Related topics