Trying to adjust spacing around multiple choice question stem and first answer choice | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Trying to adjust spacing around multiple choice question stem and first answer choice

  • Jan 31, 2025 11:14 PM UTC
  • 3 replies
  • 98 views
Forum|alt.badge.img+1

Hello:

I’d like to modify the brown/orange space in the picture below.

I’d ideally like to enter code into Look and feel → Style → Custom CSS so that it would make the change for all multiple-choice questions.

However, I would also appreciate having code that I could slip into the actual question content using the HTML option that would only impact that one question.

Much thanks,

D’Arcy

 

 

Best answer by ahmedA

Ideally what you have shared should work, maybe your QID is wrong, but since you are using the new simple layout, I can’t be certain.

One solution could be to go the JS route:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();
	const el = qc.querySelector(".question .question-display");

	el.style.marginBottom = "0";
});

 

View original

    3 replies

    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • Feb 1, 2025 12:49 PM UTC

    For the CSS:

    .question .question-display {
    	margin-bottom: 0;
    }

    For individual questions, you can just edit the question HTML and add the same thing in a style tag:

    ....YOUR QUESTION HTML....
    <style>
    	.question .question-display {
    		margin-bottom: 0;
    	}
    </style>

     

    Forum|alt.badge.img+1
    • D-Train
    • Author
    • Feb 2, 2025 12:10 AM UTC

    Hi ahmedA:

    I appreciate your speedy reply.

    The syntax you provided works but unfortunately it impacts both questions on the page instead of just that one specific question.

    I tried the following syntax:

    #QID1 .question-display {
    	margin-bottom: 0;
    }

    and

    ....YOUR QUESTION HTML....
    <style>
    	#QID1 .question-display {
    		margin-bottom: 0;
    	}
    </style>

    However, neither segment of code placed in the proper place have any impact.

    What am I missing?

    D’Arcy

    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • Answer
    • Feb 2, 2025 8:53 AM UTC

    Ideally what you have shared should work, maybe your QID is wrong, but since you are using the new simple layout, I can’t be certain.

    One solution could be to go the JS route:

    Qualtrics.SurveyEngine.addOnReady(function () {
    	const quest = this;
    	const qc = quest.getQuestionContainer();
    	const el = qc.querySelector(".question .question-display");

    	el.style.marginBottom = "0";
    });

     

    Terms & ConditionsAccessibility statement