Reducing space between multiple choice options | XM Community
Solved

Reducing space between multiple choice options

  • 25 January 2024
  • 4 replies
  • 94 views
V
Badge +1

Hi all, 

 

Have tried using look and feel (compact), java script and CSS but nothing seems to working. 

 

I have a multiple choice question with five options (answers are displayed vertically). Instead of text, I have included an image for each option. Does anyone know of a solution to reduce the space between multiple choice options? I want there to be little space between the options so it looks more like a table potentially. 

 

Any tips/tricks would be really helpful. Thanks in advance! 

 

icon

Best answer by Shashi 27 January 2024, 06:09

View original

4 replies

Shashi
Rank
Userlevel 6
Badge +27

 Assuming you are using simple layout, we can use below CSS in the HTML view of the question text:

<style>
.mc .choice-label{
padding-top:0px;
padding-bottom:0px;
}
.choice .choice-content .display-with-image{
margin-top:0px;
}
.mc.vertical .choices .choice{
margin-bottom:0px;
}
</style>

 

V
Badge +1

@Shashi , you are a life saver! That worked (yes, I was using simple layout). I will play around with the spacing (see attached) but it worked great!!

Another quick question, any good way of reducing space between the two multiple choice questions? As in the white space between the Payment question and the Data Services question? Thanks!! 

Shashi
Rank
Userlevel 6
Badge +27

Try this updated CSS script:

<style>
.mc .choice-label{
padding-top:0px;
padding-bottom:0px;
}
.choice .choice-content .display-with-image{
margin-top:0px;
}
.mc.vertical .choices .choice{
margin-bottom:0px;
}
.question {
margin-bottom:0px;
}
.question-error-wrapper{
padding:0px!important;
}
</style>

 

V
Badge +1

@Shashi Worked like a charm, thanks so much!

Leave a Reply


Terms & Conditions