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.
How to increase the width of the survey interface?
Try using
vwinstead 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
vwand 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.
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.
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!
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.
+1Dear all
Any update on CBlaison's Question? I am having the same display issue with 7 points scale. The question type is Matrix Table.
+1https://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
+1https://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?
+2Hi 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!
I just wanted to add to this discussion something that combined multiple suggestions that I read on this forum. I don’t know if this exactly addresses people’s specific questions above, but this worked for me. I wanted the width of my survey to be wider, and also not have individual questions have a scroll bar at the bottom. So in the custom CSS, I included both of these two lines:
.Skin .QuestionText{min-width: 1000px!important;}
.Skin .SkinInner {min-width: 1100px!important;}
You can change the numbers depending on the width of your screen/survey. But the important thing is that the number in the first line (here, 1000px) is slightly smaller than the number in the second line (1100px). The first line controls the width of your question; the second line controls the width of the box that bounds your survey.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.