Same question needs different view for desktop and mobile

Question

We have a rank order question that contains a paragraph sized chunk of text plus a image.  The Qualtrics out of the box text posistion stacks the image either on top or bottom of the text (depending on what you select)  but the left/right posistion will take place the first line of text and properly but each subsequent line is stacked under/over the image which looks very odd.  Placing the image on the top of the text is the best option of mobile viewing as it eliminates the need for horizontal scrolling but for the desktop view we'd like to put the text/image in a 2 column table so it properly aligns and maximized horizontal screen space.

That being said I currently have this as 2 separate questions using display logic to check if the user is mobile or not. With the plan to manually combine data at survey completion.  Is there a better way???

Thank you!

MohammedAli_Rajapkar · Accepted Answer

You can try putting the "text & image" in the table elementSo, it should look like "

descriptive text

image

OR you can try it in

with tag

descriptive text image

please note, in either case you've to play with some CSS code to reduce the height / width of each row.

TomG · Answer

You could split the text and image from the rank order question by putting the text/image in descriptive text questions for mobile and desktop using your display logic.  Then everyone sees the rank order question.You can enhance a bit with JavaScript by hiding the rank order question text and the separator before it to make the text/image and ranking question look like one question.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded