How can I reduce the space between lines (from double to single space)? | XM Community
Solved

How can I reduce the space between lines (from double to single space)?

  • 8 January 2020
  • 19 replies
  • 2493 views

How do I remove the space between lines in "text/graphic" questions? Right now, there seems to be a double space between lines and I would like it to be single space.

Thank you!
icon

Best answer by TomG 13 January 2020, 20:42

View original

19 replies

How do I remove the space between lines in "text/graphic" questions? Right now, there seems to be a double space between lines and I would like it to be single space.

Thank you!
Userlevel 1
Badge +1
@thebika I'm having similar issues and am working on finding solutions right now. Can you please post up a screenshot of what you are seeing?
@Dsoohoo

!

For some reason, it's only happening to all of the text questions in only one of my blocks.
Userlevel 1
Badge +1
@thebika Is it possible to just create a new block and use the same question(s)? I'm not sure how many questions your block contains, but I encounter similar problems when I usually copy and paste questions.
@Dsoohoo

Thank you for the idea. I just tried that and unfortunately it did not work. I'm wondering if there is javascript code I would be able to use.
Userlevel 7
Badge +19
Click the question, open the "Rich Content Editor". You should be able to remove it there. But if you need to open the code, look for ```<br>``` and delete the extra <br>.

!

Also, don't forget that it could just be white space on your image. If the image isn't closely trimmed, it might just be displaying the image, not creating spaces. If you don't see spaces on the rich content editor, and there are no ```<br>``` in the code, then you need to crop the image, it's not a code problem.
@Kate

The spacing between the lines happens between lines of text. Please see example below.

!

I don't see any breaks where they shouldn't be. Do you know if there is anything else I can add to the code? I understand there is something called line-spacing but i'm not sure how to use it.
Userlevel 7
Badge +19
@Thebika can you show us a copy of the code like I did?

In your example, that is an image. So the lines need to be removed from the image. If you can show us the real stuff you're working with we can get closer to the solution! In HTML code, line spacing is the ```<br>``` that I showed you. So I'm not sure what else we're looking for here.
So, the issue for me is that there is a double space instead of a single space between the lines lines in my text paragraph

when I go to html view, this is what I see.
!

Similar to this video I found online: https://www.youtube.com/watch?v=bFIFp12aLv8
Userlevel 7
Badge +27
Try removing the `<p>` and `</p>` tags
@TomG

Just tried that. Unfortunately, no luck. It seems as though if I choose to specify the format of the paragraph with font and size then the double space is more prominent. If I remove all formatting, the space isn't as big.
Userlevel 7
Badge +27
> @Thebika said:
> @TomG
>
> Just tried that. Unfortunately, no luck. It seems as though if I choose to specify the format of the paragraph with font and size then the double space is more prominent. If I remove all formatting, the space isn't as big.

That was an attempt at an easy fix. Preview the block, hover over the question text, right click and Inspect. Look at the element's CSS to figure out what is causing the spacing (probably a line-height style), then create a CSS rule to override it.
@TomG

Hi Tom,

Thank you for that suggestion. When I click on "Question Text" and change the line-height from 1.5em to 1.9em in inspect, the space between the lines becomes smaller.


!

I'm not very familiar with CSS. Do you a CSS rule I could use to override it?
Userlevel 7
Badge +27
Just add the same rule to Look & Feel -> Style -> CSS and it will override it.

What's strange is changing it to 1.9em should make the space bigger, not smaller. Maybe you meant to type 1.0em?

```
.Skin .QuestionText {
line-height: 1.0em;
}
```
@TomG

Oh yes! I meant to say changing it from 1.5em to 0.9em.
@TomG

It worked! Thank you!

Is there a way I can use this CSS code for a specific block?
Userlevel 7
Badge +27
> @Thebika said:
> @TomG
>
> It worked! Thank you!
>
> Is there a way I can use this CSS code for a specific block?

You can add it in a `<style>` tag to the question text of the first question on each page of the block.

EDIT:
On second thought, it might be easier just to change your `<p><span>` in the question text to a `<div>` and include line-height in the style attribute.
Badge

Hi Thebika,
I wrestled with this too. I found this clear explanation online and wanted to share with this community. p-style= is the HTML command you need. Don't forget to put

at the end of your text.
Technology Sharing: How to Adjust the Line Spacing of a Qualtrics Survey Form?Specifying a line height of 0.9 worked a treat for 3 lines of nice, tight text in my survey, as below.

Sample Survey Round One

Release Date: 20 12 2021
 
Closing Date : 19 01 2022





Userlevel 1
Badge

Hi All,
Chiming in with my feedback. I too had an issue with double spacing only on the Text/Graphic question type, but spacing was normal on all other question types. If I changed the CSS code, it reduced the line spacing on other question types too much.
Initially, I tried using span tags to change the line spacing on my Text/Graphic question but it did not work. Then I tried Mich's suggestion above and used the p-tags instead and it worked perfectly.
My method - edit the question text, select Rich Text Formatting, and then go into source code. Add this code, which works perfectly:

your text here

Your text here
 
Your text here



Leave a Reply