Trying to adjust spacing around multiple choice question stem and first answer choice | XM Community
Skip to main content

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

 

 

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>

 

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

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

 

Leave a Reply


Terms & Conditions