Removing the gap between html elements in question text | XM Community
Solved

Removing the gap between html elements in question text

  • 20 February 2019
  • 2 replies
  • 27 views
E
Userlevel 2
Badge +2
Hi everybody. I've got something like this HTML in a Qualtrics question:
`<img src="https://www.gstatic.com/webp/gallery/1.jpg" style="width: 556px; height: 273px; `
`padding-bottom:0px; margin-bottom:0px; border:1px solid black;">`
`<br><div style="margin-top:0px; padding-top:0px; border:1px solid black;">Text</div>`


My goal is to have _no gap_ between the image and the text. It looks fine while editing the Qualtrics survey, but when "Previewing" the question, there is a gap of about, say, 10 pixels. I want to remove it.

I suppose it's CSS associated with the Qualtrics theme -- perhaps a margin or padding somewhere?. I've tried different themes, but nothing gets rid of it. Is there some custom CSS I could add somewhere (presumably as a preamble to that question's HTML because I'm after only a localized change) to get rid of that gap?
icon

Best answer by Anonymous 20 February 2019, 09:13

View original

2 replies

A
Hello @ederosia ,

The gap is because of the line-height property given to question text. Hence to need to adjust the line height as required using below code. Change the value 0.9 as per your requirement

`jQuery("#"+this.questionId+" .QuestionText").css("line-height", "0.9em");`
E
Userlevel 2
Badge +2
> @Shashi said:
> Hello @ederosia ,
>
> The gap is because of the line-height property given to question text. Hence to need to adjust the line height as required using below code. Change the value 0.9 as per your requirement
>
> `jQuery("#"+this.questionId+" .QuestionText").css("line-height", "0.9em");`

Very helpful. Thank you! It weirds out the rest of the text in the question, but I can compensate for that with some code for each bit of text. Thanks again!

Leave a Reply


Terms & Conditions