How to remove spacing between day/hours/minute/seconds in the countdown clock addon - Forum | JoomShaper
Awaiting an answer SP Page Builder

How to remove spacing between day/hours/minute/seconds in the countdown clock addon

Asked by Matt Hunt 3 years ago Last activity 3 years ago

How can I remove the spacing or color the background so the numbers appear to be on a solid bar?
https://prnt.sc/LCiJA2jdGiFH

Thanks,

7 replies

Rashida Rahman Staff

Hi there!

Thanks for contacting us.

You may try to increase the background width from the countdown settings. Here is a screenshot for your convenience:

https://prnt.sc/CE_iQMN2XtEb

It may help to achieve it as a single line.

Best Regards

Matt Hunt Asked this

I'm still having quite a bit of an issue trying to format the countdown addon. I need to be able to set it so that it is on one line with a solid background and centered on all devices. If I increase the background width, it forces the right edge outside of the column.
https://prnt.sc/WeLavHBYeQMa
Any assistance gratefully recieved.
Thanks,

Pavel
3 years ago · edited

Hi. There is no way to correctly configure this, except for the use of CSS.

.my-count .sppb-countdown-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.my-count .sppb-countdown-timer.sppb-row > div {
    max-width: 100%;
    padding: 0;
}
.my-count .sppb-countdown-number {
    display: block;
    width: 100% !important;
}

In the addon settings, use only height option. Width option will not work after using this CSS code.
The remaining things, like background and border radius, you can configure through the addon's settings.

Matt Hunt Asked this

Thanks, that worked great for the clock, but when the clock runs out, this is how the text looks
https://prnt.sc/11jbyRhxRu5q
Can that be stretched back out?

Pavel

Hi. Here is an additional code for that

.my-count .sppb-countdown-finishedtext-wrap {
    grid-column: 1/-1;
}
Pavel

Hi

.my-count .sppb-countdown-finishedtext {
    margin: 0 !important;
}
Log in to reply.