Reducing White Space Between Questions - New Survey Taking Experience

To further reduce white space between questions in Qualtrics with the New Survey Taking Experience enabled and "Compact" spacing selected, you can use custom CSS to fine-tune the spacing for your multiple choice dropdown, text entry, and form field questions. Since you're embedding the survey on a webpage, maintaining a streamlined look is key, and CSS can help achieve this without disabling the New Survey Taking Experience. Below are steps and code to accomplish this, tailored to your needs. 

In your Qualtrics survey editor, go to the Look & Feel menu (click the paintbrush icon or similar in the survey builder).Navigate to the Style section, and click on Custom CSS (you may need to click the "< >" icon or "Advanced" to access it). Then you can try this code: 

.Skin .QuestionOuter {
    margin-bottom: 5px !important;
    padding-bottom: 5px !important;
}

.Skin .QuestionText {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

.Skin .QuestionBody {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

.Skin .Separator {
    margin: 0px !important;
    height: 0px !important;
}

/* Specific adjustments for dropdowns */
.Skin .DropDown .QuestionBody select {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Specific adjustments for text entry */
.Skin .TextEntryBox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Specific adjustments for form fields */
.Skin .FormField .QuestionBody table td {
    padding: 2px !important;
}

When embedding, use the Qualtrics embed code (available in the Distributions tab under Website or Embedded Feedback). For example: 

<div id="SurveyContainer"></div>
<script src="https://your-qualtrics-domain.com/.../survey.js" data-sid="YOUR_SURVEY_ID"></script>

Optional JavaScript for Fine-Tuning:

If CSS alone doesn’t fully achieve the desired compactness (e.g., for specific question interactions), you can add JavaScript to a question or block. In the survey editor, select a question, click the gear icon, and choose Add JavaScript. Add this code in the addOnload function: 

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#" + this.questionId + " .QuestionOuter").css({
        "margin-bottom": "3px",
        "padding-bottom": "3px"
    });
    jQuery("#" + this.questionId + " .QuestionText").css({
        "padding-top": "2px",
        "padding-bottom": "2px"
    });
    jQuery("#" + this.questionId + " .QuestionBody").css({
        "padding-top": "2px",
        "padding-bottom": "2px"
    });
});

Hi there,

Thanks for your reply! Unfortunately, I tried adding the Custom CSS and JavaScript without any luck. Did the code work for you when you tested?

Thanks!