I have a series of cards that are identified as Topic, Subtopic, and have a reference to the displayed answer for student reference. The Topic, and Subtopic fields are displayed on the top line of the card, aligned left and right respectively. The Reference should be displayed centred, aligned to the bottom of the card (essentially a footer).
I have CSS working successfully on the desktop app, but on the AnkiMobile device (iPad) the Reference fields is not respecting my CSS positioning, and is overwriting the Answer text.
My current HTML/CSS is as follows:
For the header text:
*<div id="myheader">*
* {{Topic}}*
* <span style="float:right;">{{Subtopic}}</span>*
*</div>*
/* Styling for header text */
*#myheader {*
* font-size: 12px;*
* text-align:left;*
* }*
For the footer text:
*<div id="myfooter">*
* <span style="color:red">Reference: </span>{{Reference}}*
*</div>*
/* Styling for footer text */
*#myfooter {*
* font-size: 12px;*
* position:fixed;*
* bottom:0;*
* width:100%;*
* margin-top:30px;*
* margin-bottom:30px*
*}*
/* Styling for mobile footer text */
*.mobile #myfooter {*
* position:absolute;*
* color:yellow;*
* margin-top: 200px}*
The colouring for the mobile text is just for testing purpose, and I have been experimenting with margin-top values just to see if I can get the Reference text to move.
I am just wanting it to float above the bottom of the window, unless there is a long answer, in which case it should appear after the end of the answer.
Any ideas on what method may work?
Thanks.