I've got some Matrix tables set in the carousal and horizontal format, but am having some difficulties getting them to look right.
Some of the text of the response points wraps, and they are wider than the screen, despite only taking up a small amount of the full width. It's fine on mobile view though. Another matrix has less options and it isn't having these issues.
The question text is rather small considering the size of the carousal box. This is the case on both desktop and mobile view.
Are there any solutions that can make the response text use more of the screen and resize the text so they don't wrap halfway through a word?
And are there ways to make the question text larger inside the carousal?
the other matrix responses not having the same issues
Thanks!
Matrix Carousal Issues
+1Best answer by Tom_1842
Hi there, I found a thread that I think will be helpful to you:
https://community.qualtrics.com/XMcommunity/discussion/14820/modify-carousel-container-or-option-prompt-buttons
In that, Diana_A and SWhitfield provide some CSS that touches on what you're trying to do. I also went ahead and put their solutions together as well as added some lines so that it doesn't happen on mobile and the answer options have reduced padding. Reducing the font size of the Answer Text to around 14 also worked for me.
@media (min-width:480px) {
.CarouselAnswerButtonContainer {
min-width: 98px;
width: 60px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 2px;
}
.CarouselAnswerButton.Horizontal.Overflow { min-width: 15px;}
.CarouselCardFrame{position:relative;
width:500px;
margin:20px 0;
height:100px;
border:2px solid #104ba5;
border-radius:2px}
.Skin label.SingleAnswer {padding: 10px;}
}
+28Hi there, I found a thread that I think will be helpful to you:
https://community.qualtrics.com/XMcommunity/discussion/14820/modify-carousel-container-or-option-prompt-buttons
In that, Diana_A and SWhitfield provide some CSS that touches on what you're trying to do. I also went ahead and put their solutions together as well as added some lines so that it doesn't happen on mobile and the answer options have reduced padding. Reducing the font size of the Answer Text to around 14 also worked for me.
@media (min-width:480px) {
.CarouselAnswerButtonContainer {
min-width: 98px;
width: 60px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 2px;
}
.CarouselAnswerButton.Horizontal.Overflow { min-width: 15px;}
.CarouselCardFrame{position:relative;
width:500px;
margin:20px 0;
height:100px;
border:2px solid #104ba5;
border-radius:2px}
.Skin label.SingleAnswer {padding: 10px;}
}
+1Thanks for the link and for compiling them here! It fixed some things but I will need to do some tweaking. Knowing what the carousal code is now I can play around with text scaling and alignments.
Window at full screen
Window less than full screen
+1Tom_1842 I've been attempting to reduce the height of the CarouselCardFrame, specific to mobile. I've perused all the existing threads I can find, and while I've been successful in reducing the height on my browser, I can't get it to work on mobile. Here's the code I'm using and a comparison of how it's appearing on browser vs. mobile. Any thoughts?
@media (min-width:480px) {
.CarouselCardFrame{position:relative;width:500px;margin:0;height:100px;border:1px solid #89919a;border-radius:0}}
}
+28Hi kaiwatanabe , the @media (min-width:480px) {} part of your CSS code is telling the survey "only do the following when there is minimum width of 480 pixels." The 480px is a generally safe bet to only apply the styling to desktop browsers. To apply the CSS to desktop and mobile surveys, remove the @media (min-width:480px) {} portion from your CSS.
_Susan_ I am glad you're on the right track! The "min-width: 98px; width: 60px;" part of the code is why I think you are running into that. That needed to be there to make the 7 scale points fit, but I don't think it is needed if your scale is 5 points.
+1Tom_1842 thanks for the response. I've also tried just the following code, and still get the exact same result as my first image - the height of the box on the browser display is reduced, but the mobile display is unaffected. Something seems to be keeping it from applying to mobile, but none of my troubleshooting so far has been successful.
.CarouselCardFrame{position:relative;width:500px;margin:0;height:100px;border:1px solid #89919a;border-radius:0}
+28Hi kaiwatanabe , try adding a !important to the height piece, like in the below
.CarouselCardFrame{
position:relative;
width:500px;
margin:20px 0;
height:100px !important;
border:2px solid #104ba5;
border-radius:2px
}
Q6 in the attached QSF has the card frame on mobile being resized with the !important bit. Q2 and Q3 are carousel questions with a 7 point scale, and Q4 and Q5 are carousel questions with a 5 point scale.
CarouselMatrixStyling.qsf
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.