Aligning MC options | XM Community
Skip to main content

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;
}

 

Hi @JohannesCE ,

Can you try this?

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

Hi @JohannesCE ,

Can you try this?

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

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

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;
}

}

 

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:

 

Leave a Reply


Terms & Conditions