Increasing size of answer box for multiple choice answers | XM Community
Solved

Increasing size of answer box for multiple choice answers

  • 13 September 2023
  • 9 replies
  • 355 views

Userlevel 2
Badge +1

I need help writing the CSS to expand the width of my answer choices. Here is what it looks like right now:

 

As you can see, the paragraphs are too compact, if I can increase the width of both answer choices by around 150%, then that would increase readability since the paragraph won’t be formatted like a column. 

I tried searching throughout this website and online but I couldn’t find a working solution.

Any help will be greatly appreciated as this is a rather urgent matter. Thanks!

icon

Best answer by Nam Nguyen 14 September 2023, 23:16

View original

9 replies

Badge +30

Qualtrics only allows you to use the size’s they have provided by default. Although it is technically possible, you might want to review the options available. Check out the link for the same.

 

https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/formatting-answer-choices/#AllowTextEntry

Userlevel 2
Badge +1

Qualtrics only allows you to use the size’s they have provided by default. Although it is technically possible, you might want to review the options available. Check out the link for the same.

 

https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/formatting-answer-choices/#AllowTextEntry

Thank you for your help. I did get a chance to browse through the link though there doesn’t seem to be anything that could increase the size of the answer box.

Do you perhaps have any other advice?

Userlevel 7
Badge +20

@DLL_01 You just need some alignment. Use this HTML code in your choice with Rich Content Editor

<div style="line-height: 1.5; text-align: justify;">
As you can see, the paragraphs are too compact, if I can increase the width of both answer choices by around 150%, then that would increase readability since the paragraph won't be formatted like a column. I tried searching throughout this website and online but I couldn't find a working solution. Any help will be greatly appreciated as this is a rather urgent matter. Thanks!
</div>

Change the line-height as what you want

Userlevel 2
Badge +1

@DLL_01 You just need some alignment. Use this HTML code in your choice with Rich Content Editor

<div style="line-height: 1.5; text-align: justify;">
As you can see, the paragraphs are too compact, if I can increase the width of both answer choices by around 150%, then that would increase readability since the paragraph won't be formatted like a column. I tried searching throughout this website and online but I couldn't find a working solution. Any help will be greatly appreciated as this is a rather urgent matter. Thanks!
</div>

Change the line-height as what you want

Thank you for your response, I don’t believe that this is what I’m looking for unfortunately. This changes the height between the sentences on the answer, which shape the answer choice vertically. What I’m trying to do is broaden the text box itself to have more horizontal reading room.

Userlevel 7
Badge +20

Thank you for your response, I don’t believe that this is what I’m looking for unfortunately. This changes the height between the sentences on the answer, which shape the answer choice vertically. What I’m trying to do is broaden the text box itself to have more horizontal reading room.

You have 2 text box sitting next to each other, what do you mean by broaden it?

Userlevel 2
Badge +1

Thank you for your response, I don’t believe that this is what I’m looking for unfortunately. This changes the height between the sentences on the answer, which shape the answer choice vertically. What I’m trying to do is broaden the text box itself to have more horizontal reading room.

You have 2 text box sitting next to each other, what do you mean by broaden it?

Essentially this…

 

Userlevel 7
Badge +20

Essentially this…

 

Add this to your Custom CSS in look & feel, change the width as you like

.Skin .SkinInner {
width: 1500px !important;
}

Let me know if it helps

Userlevel 2
Badge +1

Essentially this…

 

Add this to your Custom CSS in look & feel, change the width as you like

.Skin .SkinInner {
width: 1500px !important;
}

Let me know if it helps

This works! Thank you very much

Userlevel 7
Badge +20

@DLL_01 Happy to help 👍

Leave a Reply