Reducing White Space Between Questions - New Survey Taking Experience

Question

Hi folks, I am working on a short survey that I would like to embed in a webpage. I have the New Survey Taking Experience enabled and also have “Compact” selected for Question Spacing. That said, I would like my entire survey to be even more compact if possible so that its look and feel on the webpage is more streamlined. My survey contains a multiple choice dropdown, text entry, and form field questions. Is there a way I can reduce the amount of white space between questions without disabling the New Survey Taking Experience? Any solutions or advice are much appreciated!

EdenHaha · Answer

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:

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" });});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded