Applying css to a multi response question formatted as columns

Forum|Forum|3 years ago
July 14, 2022
2 replies
172 views

+3

GAIRTeam
Level 2 ●●

Hello,
I would like help on applying css to a multi response question that is aligned in columns. I have basic skills when it comes to css and currently have css applied in the look and feel tab for all questions, which currently works for all, however, when I align a multi response into columns it wont pick up the style. I cant see what the difference is to be able to account for it in the existing css.
Below: Image 1 is what I would like and Image 2 is what I would like to fix.
The css currently used is:
/*answer choice unselected*/
.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer,.Skin label.SingleAnswer,.Skin .MC .MAHR .QuestionBody table td label, .Skin .MC .SAHR .QuestionBody table td label {
  text-align: center;
  background-color: #0a1633;
  border: 1px solid white;
  border-radius:6px;
  color:#f1f1f1;
}

/*hover answer choice*/
.Skin label.MultipleAnswer.q-checked.q-focused:hover,.Skin label.MultipleAnswer.q-checked:hover,.Skin label.SingleAnswer.q-checked.q-focused:hover,.Skin label.SingleAnswer.q-checked:hover,.Skin label.SingleAnswer:hover,.Skin label.MultipleAnswer:hover,.Skin .q-matrix .single-answer.mobile:hover,.Skin .q-matrix .multiple-answer.mobile:hover{
border:1px solid #FFFFF0!important;
background-color: #096dd2!important;
color: #FFFFF0;
border-radius:6px;
box-shadow: -.150vw .150vw 0 0 lightgray;
}

/*selected answer choice*/
.Skin label.MultipleAnswer.q-checked, .Skin label.MultipleAnswer.q-checked.q-focused, .Skin label.SingleAnswer.q-checked, .Skin label.SingleAnswer.q-checked.q-focused {
  border:1px solid #FFFFF0!important;
  background-color: #096dd2!important;
  color: #FFFFF0;
  border-radius:6px;
}

Image 1.png

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|3 years ago
July 19, 2022

Hi there, the CSS for the hover and selected portions look okay to me. For the unselected, it looks like it's only referencing MAVR, SAVR, MAHR, and SAHR, which I believe correspond to Multiple Answer Vertical Responses, Single Answer Vertical Responses, Multiple Answer Horizontal Responses, and Single Answer Horizontal Responses. You could include MACOL and SACOL for Multiple Answer Column and Single Answer Column, but you can also remove those bits and it should work for all 3 alignments, like in the below:
.Skin .MC label.MultipleAnswer, .Skin .MC label.SingleAnswer {

text-align: center;
background-color: #0a1633;
border: 1px solid white;
border-radius:6px;
color:#f1f1f1;

}