Aligning MC options | XM Community
Skip to main content
Solved

Aligning MC options

  • July 12, 2023
  • 4 replies
  • 66 views
JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12

Hi! I have a MC question with 2 options and some styling. 

Right now, they are too far from each other (Classic Layout).

/* Style the yes/no question */
#QID176 label {
    background: #F0F0F0;
    padding: 15px;
    color: #192743;
    border-radius: 16px;
    scale: 1.2;
}
#QID176-30-label:hover,
#QID176-30-label.q-checked {
    background-color: #E73F12 !important;
    background-image: none !important;
    color: white !important;
}
#QID176-31-label:hover,
#QID176-31-label.q-checked {
    background-color: #038141 !important;
    background-image: none !important;
    color: white !important;
}

How can I change the alignment? And why is this not working?

#QID176 .ChoiceStructure td {
    padding: 0;
}

 

Best answer by Tom_1842

Is there any other code in place that might affect the display of the choices? When I add the CSS to a survey with Classic layout, I get the below:

The below CSS can adjust how far a part the choices are for a Multiple Choice question with 2 answer choices. Adjust the 150px as needed for horizontal spacing.

@media (min-width:480px) {

.Skin .MC .ChoiceStructure {
    border-spacing: 150px 20px !important;
}

}

 

4 replies

Sowrabh1993
QPN Level 5 ●●●●●
Forum|alt.badge.img+15
  • Sowrabh1993
  • QPN Level 5 ●●●●●
  • 112 replies
  • July 12, 2023

Hi @JohannesCE ,

Can you try this?

#QID176 .ChoiceStructure td { padding: 0 !important; }

Regards, Sowrabh
JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • JohannesCE
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • July 12, 2023

Hi @JohannesCE ,

Can you try this?

#QID176 .ChoiceStructure td { padding: 0 !important; }

I tried this one already, it's not working!

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • 909 replies
  • Answer
  • July 16, 2023

Is there any other code in place that might affect the display of the choices? When I add the CSS to a survey with Classic layout, I get the below:

The below CSS can adjust how far a part the choices are for a Multiple Choice question with 2 answer choices. Adjust the 150px as needed for horizontal spacing.

@media (min-width:480px) {

.Skin .MC .ChoiceStructure {
    border-spacing: 150px 20px !important;
}

}

 

JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • JohannesCE
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • July 17, 2023

Hi @Tom_1842, I have a long CSS script so it's definitely possible something is conflicting, but I can't find the problem. I can't make it work with your code, so I think I'm just gonna change it to vertical like this:

 


Terms & ConditionsAccessibility statement