CSS for making answer buttons smaller (Bug: Custom CSS precedence)

[hugo]

@hannesfrank

/* Make answer buttons smaller */
.accuracy-button__label { display: none; }
.accuracy-button__icon { font-size: 18px; }
.accuracy-button { flex-direction: row; }

@hannesfrank, this CSS was perfect, but it is not working anymore since they pushed the new version into beta yesterday. Could you help me reducing the buttons again?

Thanks!

[hannesfrank]

There seems to be an issue with Custom CSS precendence. We’ll fix this. For now you can either be more specific and add some parent class:

.accuracy-button .accuracy-button__label { display: none; }
.accuracy-button .accuracy-button__icon { font-size: 18px; }
.accuracy-button .accuracy-button { flex-direction: row; }

or drop !important everywhere.

[hugo]

@hannesfrank

.accuracy-button .accuracy-button__label { display: none; }
.accuracy-button .accuracy-button__icon { font-size: 18px; }
.accuracy-button .accuracy-button { flex-direction: row; }

Even applying, it is not changing the appearance of the buttons. Maybe they changed the name of the classes.

[hannesfrank]

no, I’m the one in charge for the queue and I did not change anything. I just made a copy&paste error:

.accuracy-button .accuracy-button { flex-direction: row; }

seems kind of useless, does it?

Try

.accuracy-button { flex-direction: row !important; }

[hugo]

It’s in a row now, but I don’t know why .accuracy-button__icon { font-size: __px; } is not affecting the size of the icon.

[hannesfrank]

Final try (looks like we already updated the emojis to use svgs in the queue instead of unicode characters):

.accuracy-button .accuracy-button__label { display: none; }
.accuracy-button .accuracy-button__icon { font-size: unset; object-fit: contain; width: 18px; }
.accuracy-button .accuracy-button__icon img { margin: 0; width: unset; }
.accuracy-button { flex-direction: row !important; }

[hugo]

Bingo!!

Thanks, @hannesfrank! Awesome job!!!