How to widen the questions column? | XM Community
Skip to main content
Solved

How to widen the questions column?

  • October 1, 2020
  • 7 replies
  • 1106 views
R

Hi,
The statements' column is very narrow (first screenshot), when I try to increase it by dragging the column divider to the right, part of the
scale disappears— please see the second screenshot.
It seems that I need to change the stylesheet file. I used the following code but the problem was not resolved.
@media only screen and (min-width: 1200px) {
#Questions{min-width:95%;}
 #SkinContent{min-width:95%;}
}
note. I use % to avoid scaling the width on smart phones.

My question is how can I remove the right/left white spaces and widen the first column' content?
Thank you!

Screen Shot 2020-09-30 at 8.00.33 PM.png

Screen Shot 2020-09-30 at 8.00.11 PM.png

Best answer by TomG

Modify your CSS media rule to this:
@media only screen and (min-width: 1200px) {
.Skin .SkinInner{width:1200px;max-width:95%}
#Questions{min-width:95%;}
  #SkinContent{min-width:95%;}
}

    7 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • October 1, 2020

    Use the below code in the onReady function of the matrix question (change the % as required)
    jQuery(".SkinInner").css("width","65%");

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
      R
      • Rasha
      • Author
      • October 1, 2020

      Thank you! But it does not work.
      Why the content sticks in the middle? I want to expand the area to see other items of 7 point Likert scale.

      TomG
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+27
      • TomG
      • Level 8 ●●●●●●●●
      • Answer
      • October 1, 2020

      Modify your CSS media rule to this:
      @media only screen and (min-width: 1200px) {
      .Skin .SkinInner{width:1200px;max-width:95%}
      #Questions{min-width:95%;}
        #SkinContent{min-width:95%;}
      }

        R
        • Rasha
        • Author
        • October 5, 2020

        it works! Thank you.

        K
        Forum|alt.badge.img+4

        Hi TomG I used your above advice (October 2020, modify CSS media) for the same kind of problem (survey was way too narrow, all centered with a lot of blank white space on both left and right). Your code advice above solved a huge part of my problem too (thanks!), but while now I have no blank white space to the left of all my matrix tables (I have over 300!), I do have a lot of open blank white space on the right side of the screen. The scale point statements in my columns are text wrapping several lines down. Any additional feedback aside? The idea of needing to manually adjust every column x 300+ questions seems time consuming. Thanks!

        A
        Level 7 ●●●●●●●
        Forum|alt.badge.img+22
        • ahmedA
        • Level 7 ●●●●●●●
        • January 15, 2021

        Add this line to your question JS:

        this.getChoiceContainer().querySelector("tr").children[0].style.width = "10%"

          TomG
          Level 8 ●●●●●●●●
          Forum|alt.badge.img+27
          • TomG
          • Level 8 ●●●●●●●●
          • January 15, 2021

          https://www.qualtrics.com/community/discussion/comment/33423#Comment_33423There is probably a CSS rule constraining your Matrix to a fixed maximum width. Use the Inspect feature of your browser to find it, then add a rule to your Look & Feel to override it making the maximum width 100%.

          Terms & ConditionsAccessibility statement