Any advice on how I can improve the appearance of radio button / checkbox questions on mobile devices, where the question is set up in more than one column? If there is more than one column the answer options are squashed up and difficult/impossible to read in some cases. I do not want to change the question layout to any fewer than two columns (and ideally three in some cases) as this will make the survey appear much longer in desktop layout (where I envisage the majority of use will be)? Ideally, in the mobile interaction, it would automatically change the layout to a single column of radio buttons (irrelevant of the number set/appearance in desktop mode) – but the only way I can find to achieve this would mean changing the desktop appearance.
Also, some questions have an ‘other – please specify option’ – if this is selected then some uneccessary instructional text appears in the textbox, but is too large to be viewed properly, and furthermore does not disappear when the box is selected/typed in (which makes entering any text into it quite difficult, as the new text just appears over the top of the instructional text). Any advice on how to remove this instructional text entirely, or change it in some way? (I cannot find any settings relating to it).
I’ve attached a couple of examples.
Unfortunately there isn’t yet a way to get the best of both worlds for columns on desktop and mobile if you want one to be columned and the other a single column. I have seen people play around with using CSS code applied in the Style menu to change how it will look on a mobile device. This requires an intermediate to advanced understanding of the CSS language to do.
The block of text that is giving you trouble for the mobile ‘Other’ box is called “Other Text for Mobile”. You can remove it by going to your Tools menu, into the Text & Translations section, and then click on the language of choice listed on this page. Click on the Edit button to the right of each question that has an Other box on it and you will find a section for “Other Text for Mobile”. If you clear out the default text in this box, it will not show live on your survey.
What is the CSS class for the checkbox/radio items in mobile? I know enough css to either force them to be single column or at least removed the borders so they aren’t running into each other, but I can’t determine the class to use for the custom CSS. Thanks!
Thanks for the reply. On the second point – is there any way to change the default for all questions in the survey? (There are a LOT of questions with ‘other’ text boxes in our survey, it would be preferable not to have to change each one individually!)