How to increase the width of the survey interface? | XM Community
Question

How to increase the width of the survey interface?


Dear all,
I am completely new to Qualtrics and the community. I have developed a survey that will only be used by Desktop users (mobile compatibility is irrelevant). When looking at the preview, I realized that my horizontal 7-point Likert scales are not displayed entirely (16pt font size for questions and answers). Instead, users would have to scroll to the right to see the 7th answer choice. Obviously, I would like to avoid that at all cost. So far, I have tried the following:
1) Reduce the font size of the answers - Solves the problem, but I would like to be consistent in the font size across questions and answers.
2) Use of Custom CSS in the Look & Feel section - I did preliminary research on my question and pasted different lines of code into the CSS editor, but they all did not have an effect on the width of the survey interface or answers, e.g.,:
.Skin, .SkinInner {width:100% !important;}
.Skin .QuestionOuter.Matrix{ max-width: 100%; }
Therefore, I would really appreciate your help in how to apply working CSS code to my problem.
Thank you very much! I am looking forward to your responses.


13 replies

Userlevel 7
Badge +21

Try using

vw 
instead of
%
.
In CSS percentage refers to dimensions of the parent element, while vw refers to the viewport width (or the screen width), which, I think , is what you are aiming for.

Thank you for your quick reply. I replaced

%
by
vw
 and adjusted the values, but all this did was shifting my survey interface to the left or right of the screen. The width itself did not change.

Userlevel 7
Badge +21

Sorry. Missed that.
You actually need to target #SkinContent instead of .Skin .SkinInner. Try this:
#SkinContent{ width:100vw; } .Skin .QuestionOuter.Matrix{ width:100vw; max-width:100vw; }

Thank you again for your additional support. I tried your code, but it had the same effect as before. The survey interface is shifted to the left or right, but its width remains unchanged. Is there any other way you could think of? I find it quite hard to believe that Qualtrics users did not have a similar inquiry in the past.

Userlevel 7
Badge +21

share you survey link. I'll see what the issue is.

You can access a dummy survey of what I intend to do here: Survey
I used your latest CSS code and replaced 100vw by 200vw in all instances to test the effect on width. As you will notice, the width of the Likert items was not affected. You still need to scroll to the right to see the 7th answer choice.
Thank you for your help!

Userlevel 7
Badge +21

Add this:

.Skin .QuestionText{max-width: 100% !important}

In the survey you've shared you aren't using a matrix question, so those CSS properties will be of no use.

Thank you!

.Skin .QuestionText{max-width: 100% !important}
worked and now the width of the questions is extended. Is there a similar property for the answer choices?

Dear all,
Thank you for this discussion which has already made me go a little further in solving my problem! I experience the same type of problem with matrix questions : participants have to scroll to the right to see all the 9 answer choices from the matrix. Like Svante, I would like to avoid that and display all the option on the computer screen at once, without requiring the participant to scroll. I have tried the CSS codes you shared in this discussion, but it's something I don't master and so I imagine that there are some modification to make in these codes since in my case it's a matrix and not a likert scale. I tried this :
#SkinContent{ width:100vw; } .Skin .QuestionOuter.Matrix{ width:100vw; max-width:100vw; }
Skin .QuestionOuter.Matrix{max-width: 100% !important}

But I don't really understand these codes and all it did was shifting the survey interface to the left and increase the width of all other questions (e.g. multiple choice questions), except my matrix... Does anyone have any idea how to also (or only!) displaye matrix entirely on the screen in order to see all the 9 scale points?

Thank you very much for the help already provided in this discussion! I am looking forward to your responses.

Badge +1

Dear all
Any update on CBlaison's Question? I am having the same display issue with 7 points scale. The question type is Matrix Table.

Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/41373#Comment_41373Any answer to this please? I have the same problem - a large matrix question still requires scrolling. Also, I would like to prevent anything displayed wrongly on mobille after the change. Thank you

Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/51876#Comment_51876Adding a question:
I would like to use the 100% settings for mobile, but around 80% of vw for desktop. How do I do this?

Badge +2

Hi there! 

Can someone please advise how I can change the layout for the ‘Form’ questions so the options are not shown in the multiple lines. (I have the same question for the ‘Pick, group, and Rank’ questions as well.)

See the image below for clarity.

Thanks!

 

Leave a Reply