What is the real class or id I need to modify to reset the card’s CSS margin?
(on all platforms: computer, Anki Droid, etc.).
I couldn’t identify which class this is. As a stopgap measure, I used Reset CSS, but it’s still not enough for me. Reset CSS is the only one that managed to eliminate the margin of this unknown class.
I already tried this and it didn’t work:
html {
margin: 0 !important;
padding: 0 !important;
}
html body {
margin: 0 !important;
padding: 0 !important;
}
.card {
margin: 0 !important;
padding: 0 !important;
}
With these codes above, the unwanted result is this:
However, when I applied Reset CSS, I was finally able to reset the margin on both PC and AnkiDroid, but it only works with “!important”. But, applying Reset CSS, there is a problem of removing the margin from all elements, even though the margin property is defined on each element. So I’m forced to put in the margin of other elements “!important” too to fix this. Look:
* {
margin: 0 !important;
}
.front {
margin-top: 50px !important;
}
Note that if I don’t apply “!important” to other classes, my text from the “front” field is pasted into the header. However, the card margin is corrected:
Full Code Front:
<div class="header">
<h1>Header<h1>
</div>
<div class="front">{{Front}}</div>
Complete CSS Code:
* {
margin: 0 !important;
}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: #f9c59c;
}
.header {
background-color: #373737;
color: #fff;
padding: 10px;
}
.front {
margin-top: 50px !important;
}