Is it possible to change question layout on mobile?

Question

My questionnaire looks exactly the way I want it to on PC. However, it doesn't look as good on mobile devices.

I am using a lot of "horizontal selection" type questions, and the labels for the different options overlap each other because of the lack of horizontal space on the phone screen. If there was a way to sort these options vertically instead of horizontally on mobile devices only, I'd be happy with that.

The labels are legible if the mobile device is in landscape orientation, but as the image stimuli on the page is in portrait orientation it's not optimal.

I know I can create separate questions for mobile and PC users, but as I have over 300 horizontal selection questions, this is far from an optimal solution. That is, unless two questions of different types can share the same ID (which I assume is not possible). Otherwise, I'd imagine the data analysis will be very tedious.

I could also remove the option labels, but this makes it harder to answer the questions so I'd like to avoid this solution as well.

I've tried different question types that work better on mobile, but none of them look as good on PC as horizontal selection.

Do you have any other ideas on how to solve this?

Answer 1

Alright ... unfortunately, a complete restructuring of the horizontal selection is impossible at the current stage of development. But that does not mean that I don't have a soltion.

First, we did some modifications to the HTML code of the horizontal selection on www.soscisurvey.de (hope, you are working on that server).

Second, please ass this PHP code to make the horizontal selection responsive

pageCSS('
    @media (max-width: 640px),
    screen and (max-width: 480px),
    handheld,
    (pointer: coarse) {
        div.question.selscale div.wedge {
            display: none;
        }
        div.question.selscale table.question {
            display: block;
        }
        div.question.selscale tbody {
            display: block;
            width: 100%;
        }
        div.question.selscale table.question tr {
            display: flex;
        }
        div.question.selscale table.question tr td {
            display: flex;
            padding: 0;
            flex-basis: 100px;
            flex-direction: column;
        }
        div.question.selscale table.question tr td div.input {
            flex-grow: 1;
            display: flex;
        }

        div.question.selscale table.question tr td div.input .s2iCheckbox {
            flex-grow: 1;
        }

        div.question.selscale div.value_text {
            display: none;
        }

	
	.s2iCheckbox {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}
	.s2iCheckbox>label.s2box {
		display: block;
		flex: 1 1 auto;
	}
	.s2iCheckbox>input,
	.s2iCheckbox>label.inputCST {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
	}
	.s2iCheckbox>label.inputCST {
		display: none;
	}
	div.s2input div.s2iSpacing {
		display: none;
	}
	div.s2item .s2iCheckbox {
		flex-basis: 14.29%;
	}
	div.shadeF0,
	div.shadeF1,
	div.shadeH0,
	div.shadeH1 {
		background-color: transparent;
	}
    }

    @media (max-width: 440px) {
        div.question.selscale div.numbering {
            display: none;
        }
        div.question.selscale table.question tr {
            width: 100%;
            display: block;
        }

	.s2iCheckbox>label {
		padding: 0.5em;
	}
    }

');

Comments

Thank you so much! The survey looks good on both desktop and mobile devices now :)

Answer 2

A quite simple option would be using a "normal" selection question, but change the display options so that the options are displayed in multiple columns. This will behave very differently from the horizontal selection on mobile devices.

but as I have over 300 horizontal selection questions

Have you considered using a scale question instead of the horizontal selection? This will allow for a display mode very similar to the horizontal selection (if you tell the question to display each item separately).

I will also see if we can optimize the mobile version of the horizontal selection. However, I cannot assure that this will be possible within 2 or 3 weeks.

Comments

The normal selection question, with its layout set to dynamic rows, unfortunately doesn't look as good as the horizontal selection on PC. Because I have 8 answer alternatives (columns), the last two alternatives end up on a separate row with a lot of spacing between them, which isn't very visually appealing and makes it hard to recognize the answer alternatives as a scale. If I had fewer alternatives, this would have been a good solution, though.

I have considered the fully labeled scale, however the dynamic display option doesn't look very good on PC when you only have one unlabeled item (options to the right, a lot of empty space on the left, "unnecessary" background color). The "single items (center)" layout would have worked great, but once again it doesn't adapt to a narrow phone screen when there are 8 labeled options (depending on character length). In a way it's better than the horizontal selection, though, because the option labels don't overlap with this question type/layout, but instead the last options get "hidden" to the right of the questionnaire border/screen.

Thank you for your answer, I'm glad to hear you're looking into it!

---

>  but instead the last options get "hidden" to the right of the questionnaire border/screen.

That shall not happen. Would you mind, sending me the respective question as XML file ("export" on the top of the question) to info@soscisurvey.de? And please also tell me which layout you are using. Thank you.

In the meanwhile I will take care of the horizontal selection. Most likely, it will switch to a vertical selection when there is insufficient screen space. Like the fully labelled scale in dynamic display mode. If you had a different idea i mind, please let me know.

---

I've sent an email titled "Debug information re: mobile question layout (requested in the SoSci Survey online support)", containing all the relevant information. Let me know if I can provide anything else.

An identical layout to the dynamic fully labeled scale would definitely work, but from a purely visual perspective, I'd say simply changing the selection direction from horizontal to vertical would look better, so that on mobile it'd look like the current mobile look for "normal" selection questions in dynamic mode/ "in rows" composition, but with only one option per row.  (although the current "option boxes" in dynamic display mode are easier to click with your fingers).

I think the dynamic display "option boxes" would look better if there was some space between them, right now the box borders are right against each other, creating thicker borders between the options while the borders around the row of boxes stay thin. But this is just cosmetic.

---

Thanks for the email and the cosmetic notes - of course, it should look good :)

You are talking about the verical space, right? We chose the "no space" variant there, because if there is let's say half a option's height as space, then you double the number of horizontal lines. That looked a bit crowded, if I remember correctly. But I'll have an eye on it.

---

We don't have the great solution, but a solid workaround. Please see the new response for how to use it.