How do i change the appearance of a simple table in the mobile version?

hpx300hpx300 RotterdamCommunity Member Qubie ✭

How do i change the appearance of a simple table in the mobile version?

Hi there!

I am currently making a stated preference survey in Qualtrics. I am using regular multiple choice questions and changing the question text to a simple table form (see picture attached). The problem however with this is that once I preview my survey and check the mobile version of it all cells of the table are presented below each other (see other picture) instead of having the full size table.

I know people are having the same issues when they use a 'matrix' type question and there is a simple way of clicking the 'mobile friendly' option on the right side.. but unfortunately nothing like this exists for the multiple choice question.

Therefore my question is: is there a way to change the preview of this table in the mobile version? Or otherwise: is there a way I can switch off this particular mobile version so people simply get the normal web version on their screen when accessing it on their phone.


Best Answer

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    Adding the following to your question text will prevent each cell of the table from breaking in mobile view. You'll still have a number of other issues to deal with to make it respondent friendly.

    <style>
    .Skin .MC .SAHR .UserTable td {display:table-cell;}
    </style>
    

Answers

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    Post your table (question text) html.

  • hpx300hpx300 RotterdamCommunity Member Qubie ✭

    <table class="UserTable">

     <tbody>

     <tr>

      <td>&nbsp;</td>

      <td><strong>Route A</strong></td>

      <td><strong>Route B</strong></td>

     </tr>

     <tr>

      <td><span style="color:#999999;">Crowding</span></td>

      <td>Few other cyclists</td>

      <td>Many other cyclists</td>

     </tr>

     <tr>

      <td><span style="color:#999999;">Congestion</span></td>

      <td>Moderate: therefore you sometimes need to slow down</td>

      <td>Heavy: therefore you need to slow down multiple times</td>

     </tr>

     <tr>

      <td><span style="color:#999999;">Number of stops</span></td>

      <td>One stop</td>

      <td>Two stops</td>

     </tr>

     <tr>

      <td><span style="color:#999999;">Distance</span></td>

      <td>6 km</td>

      <td>3 km</td>

     </tr>

     </tbody>

    </table>

  • hpx300hpx300 RotterdamCommunity Member Qubie ✭

    Thank you so much for your clear and fast reply! What other issues do you suggest I would also deal with to make it respondent friendly?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    edited May 8

    Thank you so much for your clear and fast reply! What other issues do you suggest I would also deal with to make it respondent friendly?

    There are a number of things you could do...it depends on how user friendly you want to make it and your skill level with CSS and JS.

    As of now, they are going to have to scroll right to see Route B. The easiest thing to do is add some HTML/CSS to force or suggest they rotate their screen to landscape.

    Other things you could do is size the table columns based on % width and adjust the font size on Mobile. With JS, you could move the choice labels into table cells so the choices are in their respective columns.

Sign In to Comment