Jump to content

Countdown Timer Code Mobile CSS

Recommended Posts

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!

 

Screenshot 2022-01-28 at 22.41.27.png

Screenshot 2022-01-28 at 22.41.59.png

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.