My cards are not being occluded:/

[bbibbi]

As you can see from the picture, it is shifted

[kleinerpirat]

There’s probably some max-height definition or similar messing up the alignment of the mask. Please attach the CSS in the Styling section of your card template editor, wrapped in triple backticks like this:

```
.card {…}
```

[bbibbi]

{{#Image}}

{{Header}}

{{Question Mask}}

{{Image}}

{{Footer}}

{{/Image}}

is this it?

[bbibbi]

[kleinerpirat]

That’s probably the front side of your template. Look for the Styling tab.

Also, you can edit your post (), select the code and then click on to automatically wrap it in triple backticks, so the forum software doesn’t evaluate it as HTML.

(But please show us the CSS from the Styling tab, that would be most helpful.)

[bbibbi]

sorry im not experienced with Anki - where can I find the CSS from the styling tab?

[kleinerpirat]

The code shown in the editor below the search bar is CSS (Cascading Stylesheets), a formatting language.

[bbibbi]

}

/* 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: 80%;
  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: 80%;
  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;
}

[kleinerpirat]

You seem to have cut off a bit of it (I see that because of an unpaired closing bracket on top). Hit Ctrl+A in the editor to select all the text inside, then edit the post above.

[bbibbi]

I think this is all it’s showing?

[kleinerpirat]

Then the first thing you can do is delete that } on top. CSS is quite strict about its syntax, so it might very well be all that’s needed to fix this issue.

[bbibbi]

OMG it worked thank you so much!!! You’re a life saver