How do I reduce the border width for one page in the survey? | XM Community
Skip to main content

How do I reduce the border width for one page in the survey?

  • February 14, 2023
  • 7 replies
  • 159 views
C
Level 1 ●
Forum|alt.badge.img+4

I am trying to create an information page (text questions only) like this:
{question text 1 - always show}
{question text 2 - hidden for certain respondents}
{question text 3 - always show}
without any spacing between the "questions". I have tried code from the community (TomG) that reduces the separator spacing... inspecting the preview shows the separator is a line. There are, however, borders around each element and I think reducing the border width (preferably top and bottom only)
qualtrics.pngI have managed to color the border to show where it is by adding:

to the html code of the first "question".
I would also like to reduce the spacing of the border (border-width?) so that there is no space between lines.
My preference would be to use javascript or edit the style as above (not apply a custom css to the whole survey.
Can anyone point me in the right direction?

7 replies

grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • grahulp5
  • QPN Level 3 ●●●
  • February 16, 2023

Did you have a logic for those display questions?

C
Level 1 ●
Forum|alt.badge.img+4
  • Crystal250
  • Author
  • Level 1 ●
  • February 16, 2023

Thanks grahulp5 for having a look at my question. Yes, there would be display logic applied to the middle "question" to hide for some respondents. The first and last would be displayed for all respondents. Essentially I'm looking to make an information page (text only) with some parts hidden, but splitting the text in that way means there is added space between the "questions".

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • February 16, 2023

Hi Crystal250 ,
I think below code can serve your purpose.

You can change padding and line-height as per requirement.
With Above code I get this:
image.pngHope it resolves your problem😊!!!

C
Level 1 ●
Forum|alt.badge.img+4
  • Crystal250
  • Author
  • Level 1 ●
  • February 17, 2023

Thanks qualtrics_nerd :) I am feeling a bit dense... where do I put the code? It looks like html... I tried switching the text of question 1 to HTML view and adding your code at the beginning (see image).
qualtrics.pngWhen I inspect the result it shows me the spacing is in div.QuestionBody (see image 2).
qualtrics 2.png

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • February 17, 2023

Hi Crystal250 ,
Follow the steps below:
1.Click on Rich Content editor
image.png2.Click on below highlighted symbol:
image.png3.Add your code below:
image.pngFurther, if it is possible can you please share a preview link using dummy survey having similar structure so that I can provide custom code to suit your survey .

C
Level 1 ●
Forum|alt.badge.img+4
  • Crystal250
  • Author
  • Level 1 ●
  • February 17, 2023

Hi qualtrics_nerd,
Your request that I share a link was very helpful. I created a brand new survey (the one I was working in was copied from one from last year). That one works fine:
Preview - Qualtrics Survey | Qualtrics Experience ManagementI then created one copied from the one that's not "working":
https://bcmcf.yul1.qualtrics.com/jfe/preview/previewId/68211e20-fa08-4e0f-9c04-d75514ddd260/SV_cCLnbM7lnUSfIGO?Q_CHL=preview&Q_SurveyVersionID=current
I guess this means there's some style applied that is "interfering" with what I'm trying to do?
I will continue to look into it as well - thank you for all of your help so far!

    C
    Level 1 ●
    Forum|alt.badge.img+4
    • Crystal250
    • Author
    • Level 1 ●
    • February 17, 2023

    Switching from flat to classic layout "fixes" it...

      Terms & ConditionsAccessibility statement