Hello,
Recently I made some changes to TTS on the anki cards, but now the images on iPad are stretched/squeezed. I’ve tried to search for a solution online but have been unsuccessful. The images appear normal on the computer. Below is what I have in the “Styling” section:
/* ANKINGOVERHAUL */
/* The AnKing wishes you the best of luck! Be sure to check out our YouTube channel and Instagram
for all things Anki and Med School related (including how to customize this card type and use these decks):
*/
/*#########################################################
################ 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: none;
/* ‘none’ or ‘block’ */
}
.mobile #tags-container {
display: none;
/* ‘none’ or ‘block’ */
}
/* MOVE TAGS UP FOR ‘NO-DISTRACTIONS’ ADD-ON */
#tags-container {
padding-bottom: 0px;
/* 0 normal, 55 to move up */
}
/~FONT SIZE
/*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 */
/* Desktop */
html {
font-size: 28px;
}
/* Mobile */
.mobile {
font-size: 28px;
}
/*IPAD ADJUSTMENTS (currently not applied)
.ipad .card,
.ipad #extra {
font-size: 28px;
}
.ipad .hints {
font-size: 24px;
}
.ipad #firstaid,
.ipad #sketchy,
.ipad #sketchy2,
.ipad #sketchyextra,
.ipad #picmonic,
.ipad #pixorize,
.ipad #physeo,
.ipad #additional {
font-size: 20px !important;
}
*/
/REVEALED HINTS FONT SIZE/
.hints {
font-size: .85rem;
}
/Other Fields Font Size/
#firstaid,
#sketchy,
#sketchy2,
#sketchyextra,
#picmonic,
#pixorize,
#physeo,
#additional {
font-size: .6rem !important;
}
/Other Fields Font Size on Mobile/
.mobile #firstaid,
.mobile #sketchy,
.mobile #sketchy2,
.mobile #sketchyextra,
.mobile #picmonic,
.mobile #pixorize,
.mobile #physeo,
.mobile #additional {
font-size: 20px !important;
}
/~FONT STYLE
.card,
kbd {
font-family: Arial Greek, Arial;
/Step exam’s font is Arial Greek/
}
/~MAX IMAGE HEIGHT/WIDTH
img {
max-width: 85% !important;
max-height: 100% !important;
}
/* #extra img,
#notes img,
#missed img,
#pathoma img,
#bnb img {
max-width: 85% !important;
} */
#firstaid img,
#sketchy img,
#sketchy2 img,
#sketchyextra img,
#picmonic img,
#pixorize img,
#physeo img,
#additional img {
max-width: 85% !important;
}
.ipad .card img
{
max-width: 85% !important;
max-height: 100% !important;
}
/*~COLORS
/* Default Text Color */
.card {
color: black;
}
/* Background Color */
.card {
background-color: #D1CFCE;
}
/* Cloze Color */
.cloze {
color: blue;
}
/* “Extra” Field Color */
#extra {
color: navy;
}
/* Hint Reveal Color */
.hints {
color: #4297F9;
}
/* Missed Questions Hint Reveal Color */
#missed {
color: red;
}
/* Timer Countdown Color */
.timer {
color: transparent;
}
/* Empty Link Color */
a:not([href]),
a[href^=“javascript:”] {
text-decoration: none;
color: inherit;
}
/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 Reveal Color */
.nightMode .hints,
.night_mode .hints {
color: cyan;
}
/* ~COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE
b {
color: inherit;
}
u {
color: inherit;
}
i {
color: inherit;
}
/*################ USER CUSTOMIZATION END ################
###########################################################*/
/* Styling For Whole Card*/
.card {
text-align: center;
font-size: 1rem;
height: 100%;
margin: 0px 15px;
flex-grow: 1;
padding-bottom: 1em;
margin-top: 15px;
}
.mobile .card {
padding-bottom: 5em;
margin: 1ex .3px;
}
/* Style the horizontal line */
hr {
opacity: .7
}
/* Formatting For Timer */
.timer {
font-size: 20px;
margin: 12em auto auto auto;
}
/* ~~~~~~~~~ FIELDS ~~~~~~~~~ */
/* Cloze format */
.cloze {
font-weight: bold;
}
/* Adjustments For Cloze Edit In Review On Mobile */
.clozefield,
.mobile .editcloze {
display: none;
}
.editcloze,
.mobile .clozefield {
display: block;
}
/* Text When Hint Is Shown*/
.hints {
font-style: italic;
}
/add spacing between hints and extra field/
.hints+#extra {
margin-top: 1rem;
}
/* Extra Field */
#extra {
font-style: italic;
font-size: 1rem;
}
/* ~TABLE STYLES
/* Table dynamic resize, includes mobile and tablet support */
table {
overflow-x: auto;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
overflow: scroll;
white-space: normal;
font-size: clamp(0.1rem, 1.7vw, 0.9rem) !important;
max-width: 95vw;
}
/* Left and right border cleanup */
table td:first-child {
border-left: 1px solid white;
}
table td:last-child {
border-right: 1px solid white;
}
/* Table dynamic padding */
table tr, td, th {
padding-top: clamp(0.05rem, 1vw, 1rem);
padding-bottom: clamp(0.05rem, 1vw, 1rem);
padding-left: clamp(0.05rem, 1vw, 1rem);
padding-right: clamp(0.05rem, 1vw, 1rem);
}
/* Span Correct */
table span {
font-size: clamp(0.1rem, 1.7vw, 0.9rem) !important;
}
/* Horizontal Header Style, applies to any row that spans all columns */
table tr td:first-child[colspan]:last-child[colspan] {
background-color: #ffffff;
color: #367390;
border-top: 3px solid #367390;
border-bottom: 3px solid #367390;
text-align: middle;
padding-top: 1vw;
padding-bottom: 1vw;
}
/* Alternate Header Style, set in T5 addon settings */
table th {
background-color: #ddecf2;
color: #266988;
border: 1px solid #ffffff;
font-weight: normal;
text-align: middle;
}
/* Alternate grey rows */
table tr:nth-child(even) {
color: #000000;
background-color: #f8f8f8;
}
/* Default styles if not overridden by above */
table {
color: #000000;
border: 1px solid #a4cde0;
background-color: #ffffff;
}
/* ~DETAILS FOR IMAGES
.mobile .card img {
max-width: 100% !important;
}
#extra img {
min-width: 30%;
}
.mobile .hints,
.mobile #extra img {
max-width: 100% !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;
}
/Image hover zoom/
#extra img:active,
#notes img:active,
#missed img:active,
#pathoma img:active,
#bnb img:active {
transform: scale(1.2);
}
#firstaid img:active,
#sketchy img:active,
#sketchy2 img:active,
#sketchyextra img:active,
#picmonic img:active,
#pixorize img:active,
#physeo img:active,
#additional img:active {
transform: scale(1.5);
}
.mobile img:active {
transform: scale(1.0) !important;
}
/* ~MNEMONICS LEFT JUSTIFIED
.mnemonics {
display: inline-block;
text-align: left;
/* can change to center to ‘turn off’ this feature */
}
.centerbox {
text-align: center;
}
/* ~~~~~~~~~ LISTS ~~~~~~~~~ */
ul {
padding-left: 40px;
max-width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
ul ul {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
ol {
padding-left: 40px;
max-width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
ol ol {
margin-left: 0;
margin-right: 0;
}
.mobile ul {
text-align: left;
max-width: 100%;
}
.mobile ol {
text-align: left;
max-width: 100%;
}
/* ~~~~~~~~~ ADD-ON CONFIGURATIONS ~~~~~~~~~ */
/Compatibility with Image Style Editor add-on/
.card {
–w: 0%;
}
.mobile .card {
–w: 100% !important;
}
/*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;
}
/* Fix to make pop-up dictionary images the right size */
.qtip img {
max-width: 95% !important;
max-height: 95% !important;
}
/* ANKING HYPERLINK IMAGE
#pic {
opacity: 0.0;
font-size: 16px;
font-family: Comic Sans !important;
font-style: bold;
height: 50px;
border: 0;
position: fixed;
bottom: 10px;
right: 10px;
display: block;
}
#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;
background-color: transparent;
}
/* Clickable Tags (need to download the add-on) */
kbd {
display: inline-block;
letter-spacing: .1px;
font-weight: bold;
font-size: 10px !important;
text-shadow: none !important;
padding: 0.05rem 0.1rem !important;
margin: 1px !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 !important;
line-height: auto !important;
height: auto !important;
}
/* 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;
}
/* OME BANNER */
.banner-ome {
max-width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}
.mobile .banner-ome {
display: none;
}
#button-ome {
display: none;
}
.mobile #button-ome {
display: inline;
}
/* ~BUTTON LAYOUT
.button-general {
outline: 0;
border-radius: 0.12em;
border: 1px solid #525253 !important;
padding: 5px 5px;
text-align: center;
display: inline-block;
font-size: 9.5px;
background-color: #424242;
color: #AFAFAF !important;
margin-top: 8px;
}
.mobile .button-general {
font-size: 18px;
padding: 9px 7px;
}
.expanded-button {
display: block;
margin: auto;
margin-top: 10px;
font-weight: bold;
width: 50% !important;
background: #ababab !important;
color: black !important;
font-weight: bold;
width: 50% !important;
}
#button-mq:not(.expanded-button) {
color: #c26165 !important;
}
html:not(.mobile) .button-general:hover {
cursor: default;
background-color: #E9E9E9 !important;
color: #363638 !important;
}
html:not(.mobile) #button-mq:hover {
background-color: #FA8072 !important;
color: black !important;
}
html:not(.mobile) #button-pat:hover {
background-color: #EABCE4 !important;
}
html:not(.mobile) #button-fa:hover {
background-color: #FFF1B8 !important;
}
html:not(.mobile) #button-sketchy:hover {
background-color: #7EDEC0 !important;
}
html:not(.mobile) #button-pixorize:hover {
background-color: #ea8eed !important;
}
html:not(.mobile) #button-physeo:hover {
background-color: #A1C0C6 !important;
}
html:not(.mobile) #button-bootcamp:hover {
background-color: #0b8198 !important;
}
html:not(.mobile) #button-ome:hover {
background-color: #47C3F3 !important;
}"