Matrix Carousal Issues | XM Community
Skip to main content

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?
image.pngthe other matrix responses not having the same issues
image.pngThanks!

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;}

}
Carouselmatrixpadding_2.png

Thanks 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
image.png
Window less than full screen
image.png

Tom_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}}
}
image.png

Hi 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.

Tom_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}

Hi 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

Tom_1842 that worked. Thank you! :)

Leave a Reply


Terms & Conditions