Decreasing spacing between questions in Qualtrics

Question

I've been having a lot of trouble making the spacing in between questions smaller in Qualtrics. I've tried editing the global CSS style sheet and was successful in changing some padding, but not the padding in between the questions themselves. That spacing doesn't seem to change. I've tried using the .Skin #SkinContent and .Skin #Questions classes with no luck. Changing the margin width and padding does not do anything in terms of reducing the space between questions.

Code in question. The .Skin #Questions doesn't seem to do anything. Neither does the .Skin .SkinInner. I set it 100px just to test whether it did anything.

.Skin .QuestionText {
font-size: 100%;
padding: 2px;
}

.Skin .QuestionBody {
padding:0px 1px 0px 1px;
}

.Skin #Questions {
margin: 0 0 0 0;    
}

.Skin .SkinInner {
  margin: 0;
  width: auto;

.Skin .SkinContent {
padding: 100px;

Can you share your code? Also add a jsfiddle to show the problem clearly. — aloisdg, Jan 20 '17 at 19:41
I just added the code. I'm not familiar with jsfiddle. Do I just attach a link to it with the code? https://jsfiddle.net/3h8ajfhg/ — Eugene, Jan 20 '17 at 19:47
For those asking for a fiddle, Qualtrics is a survey platform, a fiddle would be of no use in helping to debug it. — Anthony Rivas, Jan 20 '17 at 20:59

score 2 · Answer 1 · answered Jan 20 '17 at 21:09

2

Add your CSS to Custom CSS under Look&Feel/Advanced. Your CSS for .QuestionText and .QuestionBody plus the addition of .Separator should do it:

.Skin .Separator {
margin:0px 20px;
}
.Skin .QuestionText {
font-size: 100%;
padding: 2px;
}
.Skin .QuestionBody {
padding:0px 1px 0px 1px;
}

answered Jan 20 '17 at 21:09

T. Gibbons

4,919
2
15
32

It still doesn't seem to be changing. I also tried changing the margin to 0 px 0 px with no change. Is it possible that it's at the minimal spacing and no code can modify it further? Also, how quickly does the code show up in the preview? Should I be waiting a minute or two before testing the preview? – Eugene Jan 20 '17 at 21:26
Click Restart in preview and it is immediate. As far as the CSS not working for you, I'd have to see your actual survey. It may have to do with your theme. – T. Gibbons Jan 20 '17 at 21:32
I tried playing around with it and still no luck unfortunately. Is the .Skin .Separator the only line that should be doing what I need? I had some code in the Header before that I removed, but that didn't seem to solve it. I'm just using the default Qualtrics theme. Let me see if I can recreate the issue on a dummy survey. - Ok, so I tried it on a different theme survey and it did work. – Eugene Jan 20 '17 at 21:50

score 0 · Answer 2 · answered Jan 20 '17 at 21:11

0

There are a couple of things to check here: in your Look and Feel section, check to make sure Question Separator us NOT checked. this adds a small line and a great deal of space between questions. like this:

Here it is without:

Additionally, there is quite a bit of bottom padding on the question body and on the top of the question text, so we can modify those with a bit of css like this:

.Skin .QuestionText{
  padding-top:5px;
  }
.Skin .QuestionBody{
  padding-bottom:0px;
  }

With this change, we should see something like this:

Adjust to your preferences and enjoy.

answered Jan 20 '17 at 21:11

Anthony Rivas

952
13
21

Unfortunately, it doesn't seem to work. I tired including a padding of 0 px, which doesn't change the spacing. I mentioned this in the answer above, but is it possible that there's a hard minimum that can't be overridden? – Eugene Jan 20 '17 at 21:28
If you can link me to your preview i would be happy to take a look – Anthony Rivas Jan 20 '17 at 21:29

PCU University of Cambridge · Answer 3 · 2022-01-19T15:52:46.533

0

This works for me in STYLE on Multiple (select X from Y) Answer buttons - most useful to shrinking the FAT buttons Qualtrics gives you for a long list of options

.Skin label.MultipleAnswer {padding: 5px;}

edited Jan 19 '22 at 15:52

answered Jan 19 '22 at 15:51

PCU University of Cambridge

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 19 '22 at 15:51

Decreasing spacing between questions in Qualtrics

3 Answers3