Make replay button change locations depending on card type?

[Huh]

So, I really suck at CSS and my method of customising cards is basically googling “how to X Y CSS”. This time it didn’t work. For the past week I’ve tried out plenty of different (and probably overcomplicated) approaches. But I bet there’s probably some simple solution that I’ve overlooked.

I have an (custom icon if that matters) audio replay button in a specific location in card type 1. I want the same replay button have a different size and appear in a different spot in card type 2. Is this possible and, if yes, how do I do it?

Would be extremely grateful for any help in this!

[Danika_Dakika]

You can just copy what you’re using in the template for card type 1 and put that in the place you want it in the template for card type 2. Then update its formatting so it is the size you want it to be.

This seems straightforward to me, so I suspect I’m missing some nuance in your question. Consider including the relevant part of your template as text in a code/preformatted text block by putting
```

3 backticks above and below it.

```

[Eltaurus]

If by a different spot you mean something like changing the order in which the fields are displayed on the card, it’s better done directly in HTML layout, not with CSS. For example, you can have the front template for type 1 as

{{Question Field}}

{{Audio Button Field}}

and change it to

{{Audio Button Field}}

{{Question Field}}

on the front template for type 2.

If by different spot you mean something like left/right alignment, this can be done with CSS. First, wrap your whole code for each card type in elements with different classes. E.g.:

<div class="type1">
  ...template code for card type 1...
</div>

and

<div class="type2">
  ...template code for card type 2...
</div>

Then you can use different selectors in CSS to alter properties, such as position and size, in a specific card type:

.type2 .youraudiobuttonclass {
  position: ...;
  inset: ...;
  width: ...;
  ...
}

[Huh]

Yes! I knew it would have something to do with classes! I meant the alignment, sorry for not specifying. Thank you so much!