Reducing row height in multiple choice answer options (custom CSS not working) | XM Community
Skip to main content

Hello community,
It's my first time posting on a community forum, so apologies in advance if I am unclear or am missing key info!
I'd like to reduce the height of the multiple choice answer options in my entire survey, and have tried using CSS code from this post as well as this one, with no success. The most I can seem to get it to do is to shift the text to the corner of the box (by changing padding, see screenshots below), but that's not what I'm going for. Changing the height doesn't seem to do much either.
As is:
delete1.PNGWith CSS applied:
delete2.PNGCSS code:
.Skin .MC label.SingleAnswer {
 height: 50%;
 padding: 5px;
 margin: 0;
}

Anyone have any suggestions? Thank you in advance!

You should adjust the 'min-height' property in the above CSS code to adjust the choice height.
image.png
Following CSS code worked for me:

.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
min-height: 10px;
margin-top: 5px;
padding: 5px;
}

Thanks @Mishraji-- that worked!
In the meantime I had done a (probably not-great) workaround by setting margins to a negative value (-7px). Do you happen to know the pros/cons of going that route vs. setting 'min-height'?

You are welcome!
Sorry, I am unaware of pros/cons of setting negative values.

Leave a Reply


Terms & Conditions