Search code examples
cssqualtrics

Qualtrics: reduce padding of radio button labels

I am trying to use CSS to make changes to the built-in survey theme "Minimal 2014". Specifically, I am trying to reduce space in several places to make it more compact.

I have managed to reduce the space between questions and between question and answer choices using ".Skin .QuestionText" and ".Skin .QuestionBody" in the custom CSS option under Look & Feel. However, I cannot figure out how to reduce the padding / margin (?) at the bottom of the answer choice (above the radio button), and above the next/previous buttons. Here is a screenshot

I am a CSS novice - if anyone could help, it would be much appreciated. Thanks!

Solution

  • Use the browser's inspector to identify the CSS rules that need to be overridden. You can adjust these as needed:

    .Skin #Buttons {
    margin-top: 0px; /* 50px by default */
    padding: 20px; /* 20px by default */
}

.Skin .MC .MAHR .QuestionBody table td span.LabelWrapper label,
.Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label {
    padding-bottom: 5px !important; /* 20px by default */
}