How do I prevent a Jquery countdown clock from moving as the time goes down?-CodePudding

I'm running into an issue using a countdown clock called loopcounter.js. It is center aligned. However, as the time goes down, the text moves slightly.

I've tried setting a max width for the p tag & setting margin: 0 auto, however I ran into the same issue.

    $(function(){
        loopcounter('myCountdown');
    });

body {
  background:#000000
}
.messaging {
  font-family:'Montserrat',sans-serif;
  text-align:center;
  color:#ffffff;
  font-weight:600;
  font-size:20px;
  line-height:25px;
}

.myCountdown {
  background:green;
  padding:10px;
  border-radius:10px;
}

<html>
  <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>



    </style>
  </head>
  <body>
    <p >Album Drops in  <span ><span  data-date="2023-11-26 23:59:59">
                            <span ></span> : <span ></span> : <span ></span>
                        </span></span></p>

    <script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
   <script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>  
  </body>
 </html>

CodePudding user response：

You may need to set a fixed width for .myCountdown by making it a inline-block and using a min-width instead of max-width. Later if you want to also fix the texts inside counter-hours , counter-minutes and counter-seconds, you can also make them inline-block with the same solution:

    $(function(){
        loopcounter('myCountdown');
    });

body {
  background:#000000
}
.messaging {
  font-family:'Montserrat',sans-serif;
  text-align:center;
  color:#ffffff;
  font-weight:600;
  font-size:20px;
  line-height:25px;
}

.myCountdown {
  display:inline-block;
  min-width:180px;
  background:green;
  padding:10px;
  border-radius:10px;
}

<html>
  <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>



    </style>
  </head>
  <body>
    <p >Album Drops in  <span ><span  data-date="2023-11-26 23:59:59">
                            <span ></span> : <span ></span> : <span ></span>
                        </span></span></p>

    <script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
   <script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>  
  </body>
 </html>