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

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

  • Aug 26, 2023 9:38 AM UTC
  • 4 replies
  • 310 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 ●●●●●●●●
  • Aug 26, 2023 10:02 AM UTC

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 ●●
  • Aug 27, 2023 8:05 AM UTC

 

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 ●●●●●●●●
  • Aug 27, 2023 9:22 AM UTC

@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 ●●
  • Aug 29, 2023 5:27 AM UTC

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

...