Countdown Timer Code Mobile CSS

Site URL: https://www.nicolacoulson.com/dream-big-baby-masterclass

I'm using code to add the countdown timer displayed on this page. As you can see in the images, on desktop it is all displayed on one single line. However, on mobile the countdown splits across two lines. I am struggling to figure out how I can edit or amend the code to make the font smaller on mobile devices so that it is displayed on a single line. 

Any solutions or ideas? Here's the code that I'm using...

<style>
#countDownTimer{
color:#fff;
display:inline-block;
text-align:center;
font-size:2rem} 

#countDownTimer .text{
font-weight: bold;
display:inline-block;
color:#fff;
font-size:5rem;
  margin-bottom: -60px!important } 

#countDownTimer>div{
background:#BD5396; 
display:inline-block} 

#countDownTimer div>span{
margin-top:-40px!important; 
  padding:30px; 
display:inline-block
  }
</style>

<script>
// Set the date we're counting down to
let countDownDate = new Date("february 28, 2022 23:59:59").getTime();// Update the count down every 1 second
let x = setInterval(function() {// Get today's date and time
let now = new Date().getTime();// Find the distance between now and the count down date
let countDifference = countDownDate - now;
let days = Math.floor(countDifference / (1000 * 60 * 60 * 24));
let hours = Math.floor((countDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((countDifference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((countDifference % (1000 * 60)) / 1000);
document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>" + days + "</span><div>Days</div></div><div><span class='text'>" + hours + "</span><div>Hours</div></div><div><span class='text'>" + minutes + "</span><div >Minutes</div></div><div><span class='text'>" + seconds + "</span><div>Seconds</div></div>";
  if (countDifference < 0) {
    clearInterval(x);
 document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>EXPIRED</span></div>";
  }
}, 1000); 
</script>
 

TIA!

Add to Design > Custom CSS

/* Mobile counter */
@media screen and (max-width:767px) {
div#countDownTimer {font-size: 1rem;}
div#countDownTimer .text {
    font-size: 2rem !important;
    padding-left: 5px;
}
}

10 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile counter */
@media screen and (max-width:767px) {
div#countDownTimer {font-size: 1rem;}
div#countDownTimer .text {
    font-size: 2rem !important;
    padding-left: 5px;
}
}

 

Amazing! Thank you so much 😀