Remove all padding / gaps between multiple choice items? | XM Community
Skip to main content

Hello,
I want to do a set of multiple choice questions, each question has 3 possible responses (single choice). The choices are images only, no text.
I would like them to be displayed like tiles without any gaps in between to make best usage of the space. Vertically on mobile devices, horizontally on desktop.
I found some CSS code to remove padding, but that somehow only works on desktop and does not remove all the distance between the images.
Any advice?
Thanks!
Felix


image.png

Hi FelixRuester,
Please try this:
jQuery(".Skin .MC li .LabelWrapper").css("margin","0");
Good luck :)
EDIT: if you want to apply it to all MC questions in your survey, add it in the custom CSS section instead.
.Skin .MC li .LabelWrapper {
margin: 0;
}

Hi @bgooldfed,

thanks for this, but the effect is that the desktop view doesn't change, while the mobile view now crops the images and doesn't show them vertically anymore, but introduces a horizontal scroll:
image.png
Without any code, the tiles are aligned vertically on desktop and horizontally on phone, which is perfect.
I'd just like to remove / reduce the grey box around the image and the space between the 3 options:
image.png
Best
Felix



Hi FelixRuester,
Oh that is no good, I thought it would work 😞 I can't figure this out without having a similar copy to play with and see the CSS as is. If you want, you could attach a QSF file here with something set up the same (eg: a copy of this survey, or one with replaced images/text) and I could take a look sometime and see.
Otherwise hopefully somebody wise than I will see this and lend a hand :)
Best of luck

Hi there, the below CSS should reduce the gray space around the images:
.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
    padding: 0px !important;
}

Leave a Reply


Terms & Conditions