How to center align Multiple Choice Questions in entire survey. | XM Community
Skip to main content

How to center align Multiple Choice Questions in entire survey.

  • December 27, 2022
  • 2 replies
  • 1126 views

Forum|alt.badge.img

I am making a test and I want the Text/Graphic "question" to be larger on the screen and separated from the multiple choice question below it. I wanted to do this by having general text span the whole screen and then format the actual multiple choice question smaller and centered on the screen. I was able to do most of it with the below CSS in the survey look and feel.
#SkinContent{ width:75vw; }
.Skin .QuestionOuter{max-width: 100%;}
.Skin .QuestionOuter.MC{max-width: 50%}

However, I cannot figure out how to have the smaller multiple choice section now centered on the screen, it is left aligned with everything I do. I do not want the text itself center-aligned, I just want the box of text and questions to show in the middle of the screen. Everything I have seen deals with margins but those are adjusted from my code above.
I tried the below but it doesn't do anything...
.Skin .QuestionBody{display: flex; justify-content: center}

I have a very novice level of understanding in either Java or CSS so I am not sure what I am missing. Thanks.

2 replies

Forum|alt.badge.img
  • Author
  • December 27, 2022

qualtricssampleleftalign.pngHere is how mine looks currently and I want the entire Multiple Choice question in the red box to show up centered instead of on the left side of the screen.


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • December 28, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/53460#Comment_53460For your Multiple Choice question include the margin: 0px auto; in Custom CSS under MC skin.
Hope it helps!