Search code examples
cssqualtrics

How to reduce the distance between radio buttons in Qualtrics using Custom CSS

I am trying to make a survey in qualtrics that will be answered on mobile phones. I include several surveys that use (horizontal) multiple choice single answer radio buttons, e.g. 7 points from not at all to extremely with only those anchors .

When the survey is taken on a mobile device, these questions get changed to a vertical format, however then the distance between each point is very large which causes people to have to scroll to see all options.

How could I reduce the size between those radio buttons?

I have succeeded in reducing the distance between vertical radio buttons using the following Custom CSS:

    /*
    .Skin #SkinContent .MC .SACOL .ChoiceStructure td,
    .Skin #SkinContent .MC .MACOL .ChoiceStructure td,*/
    .Skin #SkinContent .QuestionBody li,
    .Skin #SkinContent .DL td,
    .Skin #SkinContent .SS .QuestionBody,
    .Skin #SkinContent .RO .DND ul.Edited .rank,
    .Skin #SkinContent .RO .DND ul.NotEdited li:hover .rank,
    .Skin #SkinContent .RO .DND .rank,
    .Skin #SkinContent .PGR .DragAndDrop .rank,
    .Skin #SkinContent .MC .MSB .QuestionBody,
    .Skin #SkinContent .MC .SB .QuestionBody,
    .Skin #SkinContent .MC .DL .QuestionBody,
    .Skin #SkinContent .RO .SB .QuestionBody {
    padding:5px;
    }

The problem with this is that I have other questions which are vertical and look less nice with little space between the buttons (categorical answers rather than a scale). Therefore I would prefer to change the horizontal buttons in some way or perhaps change only the required questions.

Solved using this CSS:

   .Skin #skindContent .MC .MAHR .QuestionBody td.LabelContatiner, .Skin .MC
   .SAHR .QuestionBody td.LabelContatiner {
    height: 38px; }
Solution

  • When the survey is taken on a mobile device, these questions get changed to a vertical format, however then the distance between each point is very large [...]

    How could I reduce the size between those radio buttons?

    In a DOM inspector, check to see if there are values for the following CSS style attributes:

    • height
    • line-height
    • margin
    • margin-top
    • margin-bottom
    • padding
    • padding-top
    • padding-bottom

    You will need to edit one or more of those.