Is there a way to add a line or space before a Don't Know option in Multiple Choice on Mobile? | XM Community
Skip to main content
I'd like to differentiate a DK option from others in a multiple choice on Mobile by adding either a line or space.



I used the code below to add a line which works for desktop but on Mobile when the horizontal options get turned to vertical there is no line.

<style>

@media only screen and (min-width:481px) {

td:last-of-type { border-left: 1px solid grey; }

td:last-of-type label { margin-left:10px; }

}

</style>



!

!
Add this rule:

```

@media only screen and (max-width:480px) {

td:last-of-type { border-top: 1px solid grey; }

td:last-of-type label { margin-top:25px; }

}

```
@TomG I tried this and it shows the line for Mobile but not desktop now. Am I adding it incorrectly?



<style>

@media only screen and (min-width:481px) and (max-width:480px) {

#QID59 td:last-of-type { border-left: 1px solid grey; }

#QID59 td:last-of-type label { margin-left:10px; }

}



@media only screen and (max-width:480px) {

td:last-of-type { border-top: 1px solid grey; }

td:last-of-type label { margin-top:25px; }

}

</style>
> @jli5184 said:

> @TomG I tried this and it shows the line for Mobile but not desktop now. Am I adding it incorrectly?

>

> <style>

> @media only screen and (min-width:481px) and (max-width:480px) {

> #QID59 td:last-of-type { border-left: 1px solid grey; }

> #QID59 td:last-of-type label { margin-left:10px; }

> }

>

> @media only screen and (max-width:480px) {

> td:last-of-type { border-top: 1px solid grey; }

> td:last-of-type label { margin-top:25px; }

> }

> </style>



Yes, your first rule is wrong...you can never have min-width 481px and max-width 480px at the same time. Remove max-width. You should probably add the QID to the second rule if it needs to be specific to one question on the page.
@TomG ah got it to work now with the following code. Thank you!!



@media only screen and (min-width:481px) {

#QID59 td:last-of-type { border-left: 1px solid grey; }

#QID59 td:last-of-type label { margin-left:10px; }

}

@media only screen and (max-width:480px) {

#QID59 td:last-of-type { border-top: 1px solid grey; }

#QID59 td:last-of-type label { margin-top:25px; }

}
> @jli5184 said:

> @TomG ah got it to work now with the following code. Thank you!!



You should accept the answer.

Hi TomG I tried to modify your code, to make a horizontal line appear on the third to last response (for a MC with vertical display). It does not seem to be working, is there something I am doing wrong?

Code:

image.pngThank you so much for any help you give.

Ana

anhernan - A vertical MC uses a unordered list, not a table. So, use 'li' instead of 'td'.

Hi TomG I changed 'td' to 'li', however it shows this on Qualtrics:
image.pngAnd it does not show on survey preview.

Hi,
I am trying to draw a line between the "don't know" choice and the others, but my codes are totally different! I tried to adjust the code based on mine and now have the line but not long enough! How may I fix it and also how may I have the line in mobile format with my code version? I mean where should I add this script?!
Screen Shot 2022-11-04 at 2.36.09 PM.pngScreen Shot 2022-11-04 at 2.36.15 PM.png
Thanks

Leave a Reply


Terms & Conditions