How to center the countdown timer in the middle of the page? | XM Community
Skip to main content
Question

How to center the countdown timer in the middle of the page?

  • August 26, 2023
  • 4 replies
  • 264 views

Forum|alt.badge.img+4

Hi,

I just want to align the countdown timer in the middle of the page, and the CSS codes below do not work.

 

.Skin .Timing {float:center; align-content: center;}

.Skin .Timer {float:center; align-content: center;}

Skin .FlipClock {align-content: center; text-align: center;}

 

Very grateful if I can get some help on this.

Thx a lot,

Gilles

4 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • August 26, 2023

Hi @Gilles,
Try this, change the QID according to your question ID

.Skin #QID4 fieldset {
width: 100%;
min-width: 0;
max-width: none;
align-content: center !important;
}
#QID4 fieldset {
display: flex !important;
}

Let me know if it work


Forum|alt.badge.img+4
  • Author
  • Level 2 ●●
  • 4 replies
  • August 27, 2023

 

Thx @dxconnamnguyen,

Seems to work,

How can I adapt this CSS code in the Look & Feel Tab to apply it on all pages ?

In fact, I am building a Quiz template with a set of random questions to display for each participant with a timer on each question.

Thx again for your help.

Gilles


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • August 27, 2023

@Gilles In case you want to make it a template I think there are 2 ways to do it:
1. Make the CSS style globally for Timing question only.
2. Make the style stick with the question so when you copy it, they go together (Maybe put it on JavaScript)


Forum|alt.badge.img+4
  • Author
  • Level 2 ●●
  • 4 replies
  • August 29, 2023

Hi,

As I have only a set of 5 questions that randomly appear to each respondent (out of 25), is it possible to dynamically display the numbering of questions each time?

e.g. 

Question 1 of 5

Question 2 of 5

...