gracemoore Posted January 28, 2022 Share Posted January 28, 2022 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! Link to comment
tuanphan Posted January 29, 2022 Share Posted January 29, 2022 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; } } gracemoore 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
gracemoore Posted January 30, 2022 Author Share Posted January 30, 2022 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 😀 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment