Try it now..

Yes that's better Chen, thank you

I just need to change the numbers to bold text

How can I add a little more space between the numbers and the days ,hours etc. The numbers are almost touching the letters

It needs some adjustments for text sizing (words for: hours, minutes, etc.) & the padding needs a bit of adjustment.
I'll work on it later today to fix things up.

Try it now & let me know if it works properly this time.

The same thing with this code too Chen, see attached for current screenshot on Hobby

I've added it on Hobby and it's working the same as the original no reduction in size.

All 3 different code blocks are there so you can see them

New Year Countdown

There are settings at the onset of the block code to change the year & other text.

PHP Block Code:
global $context;

echo '
<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2026-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2026", "' . $context['forum_name'] . ' Countdown"];
var mytimecounter_hny = ["happy", "new", "year"];
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
}
</script>
<div id="blockclocktimer" style="position: relative;display: flex;flex-direction: row;align-items: stretch;width: 100%;overlfow: hidden;padding: 0.5rem;">
<div class="mytimecounter_parent" style="overflow: clip;width: 100%;">
<div class="mytimecounter_container" style="box-sizing: content-box;">
<h1 class="mytimecounter_top mytimecounter_titles0"></h1>
<h1 class="mytimecounter_mid">
<svg class="mytimecounter_svg" xmlns="http://www.w3.org/2000/svg">
<line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
</svg>
</h1>
<h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
<div class="mytimecounter_clockdiv">
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_dayz mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_days"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_hours mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_hrs"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_minutes mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_mins"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_seconds mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_secs"></div>
</div>
</div>
</div>
</div>
</div>
<script>
mytimecounter_getTimeRemaining = function(endtime) {
total = Date.parse(endtime) - Date.parse(new Date());
seconds = Math.floor((total / 1000) % 60);
minutes = Math.floor((total / 1000 / 60) % 60);
hours = Math.floor((total / (1000 * 60 * 60)) % 24);
days = Math.floor(total / (1000 * 60 * 60 * 24));
return {total, days, hours, minutes, seconds};
}

mytimecounter_updateClock = function(id, endtime = "") {
if (endtime) {
updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
$("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
$("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
$("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
$("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
if (updateTimeSpan.total <= 0) {
clearInterval(timeintervalCounter);
}
if (updateTimeSpan.days > 99) {
$(".mytimecounter_days").css("padding-right","1cw");
}
}
}

mytimecounter_initializeClock = function(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}

$(document).ready(function() {
if (typeof mytimecounter_twice === "undefined") {
var mytimecounter_twice = true;
$(".mytimecounter_titles0").html(mytimecounter_titles[0]);
$(".mytimecounter_titles1").html(mytimecounter_titles[1]);
$(".mytimecounter_days").html(mytimecounter_days);
$(".mytimecounter_hrs").html(mytimecounter_hrs);
$(".mytimecounter_mins").html(mytimecounter_mins);
$(".mytimecounter_secs").html(mytimecounter_secs);
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
$(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
$(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
$(".mytimecounter_top").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"2rem"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"2rem"});
$(".mytimecounter_clockdiv").css({"flex": 1, "position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"min-width":"5%", "max-width":"5%", "width":"5%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
$(".mytimecounter_clockspan").css({"margin":"0px", "padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
$(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
$(".mytimecounter_smalltext").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_smalltext2").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_seconds").css("color", "red");
/* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
mytimecounter_str = "";
for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? \'<span class="mytimecounter_midspan"></span>\' : "");
}
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url(\'" + mytimecounter_fireworksgif + "\')", "background-repeat":"no-repeat", "background-size":"cover"});
$(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
$(".mytimecounter_clockdiv").html(\'<div class="mytimecounter_clockdivdiv"><span>\' + mytimecounter_str + \'</span></div>\');
$(".mytimecounter_clockdiv").css({"flex": 1, "padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
$(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
$(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
}
var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
if (mobileBlockCheck) {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
}
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
$(".mytimecounter_container").width(w);
$(".mytimecounter_container").height(h);
var offset = -1 * ($(".mytimecounter_parent").width() - ($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON));
$("#blockclocktimer").css("padding", offset);
$(window).resize(function() {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
});
}
});
</script>';

I decided to try out scaling based on device window width.
Try this HTML block code & let me know...

<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2026-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2026", "Quiz and Arcade Reset"];
var mytimecounter_hny = ["happy", "new", "year"];
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
}
</script>
<div style="overflow: hidden">
<div class="mytimecounter_parent" style="overflow-y: clip;width: 100%;">
<div class="mytimecounter_container" style="box-sizing: content-box;">
<h1 class="mytimecounter_top mytimecounter_titles0"></h1>
<h1 class="mytimecounter_mid">
<svg class="mytimecounter_svg" xmlns="http://www.w3.org/2000/svg">
<line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
</svg>
</h1>
<h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
<div class="mytimecounter_clockdiv">
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_dayz mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_days"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_hours mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_hrs"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_minutes mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_mins"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_seconds mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_secs"></div>
</div>
</div>
</div>
</div>
</div>
<script>
mytimecounter_getTimeRemaining = function(endtime) {
total = Date.parse(endtime) - Date.parse(new Date());
seconds = Math.floor((total / 1000) % 60);
minutes = Math.floor((total / 1000 / 60) % 60);
hours = Math.floor((total / (1000 * 60 * 60)) % 24);
days = Math.floor(total / (1000 * 60 * 60 * 24));
return {total, days, hours, minutes, seconds};
}

mytimecounter_updateClock = function(id, endtime = "") {
if (endtime) {
updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
$("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
$("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
$("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
$("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
if (updateTimeSpan.total <= 0) {
clearInterval(timeintervalCounter);
}
}
}

mytimecounter_initializeClock = function(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}

$(document).ready(function() {
if (typeof mytimecounter_twice === "undefined") {
var mytimecounter_twice = true;
$(".mytimecounter_titles0").html(mytimecounter_titles[0]);
$(".mytimecounter_titles1").html(mytimecounter_titles[1]);
$(".mytimecounter_days").html(mytimecounter_days);
$(".mytimecounter_hrs").html(mytimecounter_hrs);
$(".mytimecounter_mins").html(mytimecounter_mins);
$(".mytimecounter_secs").html(mytimecounter_secs);
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
$(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
$(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
$(".mytimecounter_top").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"3rem"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"3rem"});
$(".mytimecounter_clockdiv").css({"position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"4rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"width":"10%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"4rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
$(".mytimecounter_clockspan").css({"padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
$(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
$(".mytimecounter_smalltext").css({"font-size":"1rem", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".mytimecounter_smalltext2").css({"font-size":"1rem", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".mytimecounter_seconds").css("color", "red");
/* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
mytimecounter_str = "";
for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? '<span class="mytimecounter_midspan"></span>' : '');
}
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url('" + mytimecounter_fireworksgif + "')", "background-repeat":"no-repeat", "background-size":"cover"});
$(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
$(".mytimecounter_clockdiv").html('<div class="mytimecounter_clockdivdiv"><span>' + mytimecounter_str + '</span></div>');
$(".mytimecounter_clockdiv").css({"padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
$(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
$(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
}
var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
if (mobileBlockCheck) {
var h = $(window).height(), w = $(window).width();
var ratio = (120+w)* 0.00115;
var adjust = w < 1920 && ratio  > 0 && ratio < 1 ? ratio : "1.0";
$(".mytimecounter_parent").css("font-size", "small");
$(".mytimecounter_parent").css("transform", "scale(" + adjust + ")");
}
$(window).resize(function() {
var h = $(window).height(), w = $(window).width();
var ratio = (120+w)* 0.00115;
var adjust = w < 1920 && ratio  > 0 && ratio < 1 ? ratio : "1.0";
$(".mytimecounter_parent").css("font-size", "small");
$(".mytimecounter_parent").css("transform", "scale(" + adjust + ")");
});
}
});
</script>

It's mostly a line-height issue but may require other changes.
I'll have a look.

Carrying on from the post elsewhere.

The issue with the block is that on a mobile device it all get scrunched up.

If you look at the attachments you'll see what I mean. I have installed the block on Hobby along with a code from an online countdown site.

The online version changes size when the screen changes but your version doesn't.

As I said please don't put this in front of other plans you've got, I wont be using it untill the beginning of March