Format Multiple Choice Options Horizontal on Mobile (Simple Layout) | XM Community
Skip to main content

I am looking to force my multiple choice scale question to display answer choices horizontally on mobile devices. This is using the newer Modern/Simple layout. See below how the question is displayed on desktop.

 

 

See below how the question displays on mobile (answer choices listed vertically).

 

While I can choose to place the answer choices in 5 columns instead, it causes it to scroll sideways and places text to the left of the radio button.

 

Does anyone have any workarounds/custom CSS to display 5 pt scale questions horizontally on mobile devices using the Simple Layout? I understand this may require adjusting the font to fit in the smaller screen width.

Hello ​@jake_dufinetz,

The Simple layout in Qualtrics doesn’t support custom CSS like other layouts. Survey questions are designed to automatically adjust based on the display size.

If you're primarily targeting mobile users, one workaround I’d suggest is to use a 'Matrix Table' question instead of a standard 5-point scale. Enable the 'Mobile Friendly' option, this will show the scale in an accordion format on mobile devices. While it won’t display the scale horizontally, it will offer a cleaner and more user-friendly experience.

Let me know if this helps.

Hi ​@jake_dufinetz 

You can give a try to the following CSS in you question source html. Keep in mind that it’s not extensively tested and might need further adjustments if you have further custom CSS already applied to your survey.

<style>
@media (max-width: 768px) {
  .mc.vertical .choices.columnar,
  .mc.horizontal .choices.columnar {
    grid-gap: 0 !important;
  }
  .mc.vertical .choices .choice,
  .mc.horizontal .choices .choice {
    margin-bottom: 0 !important;
  }
  .choice-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 !important;
  }
  .choice-content {
    font-size: 0.75em;
    margin-top: -4px;
    margin-right: 0 !important;
    text-align: center !important;
  }
  .mc .choice-content {
    padding-left: 0 !important;
  }
  .question .choice .choice-content .display-with-image {
    margin-right: 0 !important;
  }
  .radio-button {
    margin-bottom: 4px;
  }
}
</style>
Question text

 

Leave a Reply


Terms & Conditions