Hi ,
I have created a bipolar question with a 7 point scale. But the width of the container holding the question body does not increase automatically and the horizontal scroll bar seems to show up. I understand that to remove the scrollbar Javascript has to be used. But I am unable to identify the right class or code the script correctly. Was anyone able to solve this issue? Please let me know.
Sumeshsdn Could you provide a Preview Link to your survey?
Here -
https://uspta.qualtrics.com/jfe/preview/SV_08ms48M6OSfxUpL?Q_CHL=preview&Q_SurveyVersionID=current
For your theme, this should do the trick:
@media (min-width: 980px) {
.Skin .SkinInner {
display: table;
max-width: 1200px;
}
}
@media (min-width: 770px) {
.Skin #SkinContent {
max-width: 95%;
width: unset;
}
}
https://www.qualtrics.com/community/discussion/comment/36945#Comment_36945Thank you very much farmaly ! It worked perfectly!!
These recommendations alone above did not work. THis is what works for me.
In look and feel, CSS
/* Set the overall width to 85% and center the matrix */
.Skin, .SkinInner {
width: 85% !important;
margin: 0 auto !important; /* This will center it */
}
/* Ensure the matrix is within the 85% width */
.Skin .QuestionOuter.Matrix {
max-width: 85% !important;
margin: 0 auto !important; /* This will center it */
}
/* Optional: Adjust padding to ensure the content isn't too close to the edges */
.Skin .Matrix .ChoiceStructure td,
.Skin .Matrix .ChoiceStructure th {
padding: 10px !important; /* Adjust as needed */
}
/* Expand matrix to full width */
.Skin .Matrix {
width: 100% !important;
max-width: 100% !important;
}
/* Adjust the spacing for the matrix rows */
.Skin .Matrix .ChoiceStructure td,
.Skin .Matrix .ChoiceStructure th {
padding: 10px; /* Adjust the padding as needed */
}
/* Make matrix container use full width */
.Skin .QuestionBody {
width: 100% !important;
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.