Multiple choice question - Adjust the list of options to minimise scrolling down | Experience Community
Skip to main content
Solved

Multiple choice question - Adjust the list of options to minimise scrolling down

  • March 1, 2026
  • 2 replies
  • 35 views
VictorAV
Level 3 ●●●
Forum|alt.badge.img+6

Hello Qualtrics team! 

We’re working in the layout of a ‘Multiple choice’ question and we want to be sure it’s correctly displayed.

It consists on a  'aidedBrandAwareness' question and The works similarly to the industry standard for this 'aided Awareness' KPI: we prompt the respondent with our brand alongside the rest of the competitors (name and logo) so they can select those they recognise. For instance:

Screenshot 2026-02-27 at 17.42.09.png

Based on the survey design, only four brands (3 in the mobile phone layout) are clearly visible but users must scroll down to see the rest. 

Although the list of competitors is randomised, reducing the scroll-down would minimise the risk of survey items being forgotten (which could impact our KPI measurement) due to the survey's layout. We're talking about 11 different brands (=options) in countries with the fewest options, up to 15 in the country with the most.  

Could we configure the question to minimise scrolling down for this type of question? I assume that it could be impossible to completely eliminate, but at least reducing as much as possible. For instance, configuring the list to appear in 2 columns, reducing the size of the rows, etc. 

Your assistance could be very useful.
Thanks! 

Best answer by nikamshubham73

Hi ​@VictorAV, 
You can adjust the below settings to have brands in columns(See image below). But if you still want to adjust the scrolling, you can use the below code, paste in the CSS of Look & Feel, it would reflect for the whole survey.

CSS Code: The below code adjusts your mobile view, if you want it work for desktop as well, remove the first line and you are good to go. Adjust the values accordingly to your requirement.

@media screen and (max-width: 768px) {

    .ChoiceStructure {
        width: 100% !important;
        font-size: 10px !important;
        transform: scale(0.7);
        transform-origin: top left;
    }

}

 

2 replies

nikamshubham73
Level 2 ●●
Forum|alt.badge.img+1
  • nikamshubham73
  • Level 2 ●●
  • Answer
  • March 4, 2026

Hi ​@VictorAV, 
You can adjust the below settings to have brands in columns(See image below). But if you still want to adjust the scrolling, you can use the below code, paste in the CSS of Look & Feel, it would reflect for the whole survey.

CSS Code: The below code adjusts your mobile view, if you want it work for desktop as well, remove the first line and you are good to go. Adjust the values accordingly to your requirement.

@media screen and (max-width: 768px) {

    .ChoiceStructure {
        width: 100% !important;
        font-size: 10px !important;
        transform: scale(0.7);
        transform-origin: top left;
    }

}

 

    VictorAV
    Level 3 ●●●
    Forum|alt.badge.img+6
    • VictorAV
    • Author
    • Level 3 ●●●
    • March 4, 2026

    Thanks ​@nikamshubham73 

    I’ve also used other JavaScript code that solves this situation:
     

    Qualtrics.SurveyEngine.addOnReady(function()
    {
        var container = this.getQuestionContainer();
        var questionBody = container.querySelector('.QuestionBody');

        /* 1. Desktop/Laptop Layout (2 Columns, No Horizontal Scroll) */
        if (window.innerWidth > 480) {
            if (questionBody) {
                questionBody.style.display = "block"; 
                questionBody.style.columnCount = "2";
                questionBody.style.columnGap = "15px"; // Narrower gap to save space
                questionBody.style.width = "100%";
                questionBody.style.height = "auto";
                questionBody.style.overflowX = "hidden"; // Prevents side-scrolling
            }
        } 
        /* 2. Mobile Layout (Force 1 Column) */
        else {
            if (questionBody) {
                questionBody.style.columnCount = "1";
            }
        }

        /* 3. Reduce Cell Width and Vertical Padding */
        var labels = container.querySelectorAll('.Selection, label.ChoiceContent');
        labels.forEach(function(label) {
            label.style.paddingTop = "4px";
            label.style.paddingBottom = "4px";
            label.style.marginTop = "2px";
            label.style.marginBottom = "2px";
            label.style.boxSizing = "border-box";
            // Shrinks the 'cell' clickable area so they don't overlap columns
            label.style.width = "95%"; 
        });

        /* 4. Normalize Logos and Anchor "None of these" (Code 10) */
        var images = container.querySelectorAll('img');
        images.forEach(function(img) {
            img.style.maxHeight = "30px"; // Keeps rows short
            img.style.maxWidth = "100%";
            img.style.width = "auto";
        });

        // If "None of these" (Code 10) exists, make it span both columns
        var noneOption = container.querySelector('[id*="10"]');
        if (noneOption) {
            var listItem = noneOption.closest('li');
            if (listItem) {
                listItem.style.columnSpan = "all";
                listItem.style.width = "100%";
                listItem.style.marginTop = "10px";
            }
        }
    });

     

      Terms & ConditionsAccessibility statement