Countdown Javascript not working for smaller screens/mobile devices

Question

The countdown Javascript I have for my website does not appear on smaller screens/mobile devices. It shows on my browser when in maximised view but not when I scale it down to a mobile size. Does anyone know what the issue could be? Everything else appears such as the text DAYS and HOURS.

Here is my HTML including the Javascript:

<div id="sale_banner" class="sale_banner">
        <p><?php echo $this->__('<strong>SALE now on!</strong> Up to 50% off on selected items - ') ?>
        <a style="color:white" href="<?php echo Mage::getBaseUrl(); ?>sale"><u><strong> <?php echo $this->__('SHOP NOW!') ?></strong></u></a>
        </p>

        <div class="countdownList" style="text-align: center;">
            <ul>
                <li></li><span>Ends in:</span>
                <li><b><span id="days"</span></b>Days</li>
                <li><b><span id="hours"></span></b>Hours</li>
                <li><b><span id="minutes"></span></b>Minutes</li>
                <li><b><span id="seconds"></span></b>Seconds</li>
            </ul>
        </div>
    </div>

    <script>

        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;

        let countDown = new Date('Jan 31, 2020 23:59:59').getTime(),
            x = setInterval(function() {

                let now = new Date().getTime(),
                    distance = countDown - now;

                document.getElementById('days').innerText = Math.floor(distance / (day)),
                    document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
                    document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                    document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

            });
    </script>

Here is my CSS:

.countdownList li {
  display: inline-block;
  padding-right: 1em;
  font-size: 0.9em;
  list-style-type: none;
  text-transform: uppercase;
  line-height:16px;
  font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen-Sans,
  Ubuntu,
  Cantarell,
  "Helvetica Neue",
  sans-serif;
}

.countdownList li span {
  display: block;
  font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen-Sans,
  Ubuntu,
  Cantarell,
  "Helvetica Neue",
  sans-serif;
}

Here's the mobile equivalent (HTML):

<header class="mobile">

    <ul class="header-upper">
        <li class="left-upper">
            <div class="upper-links">
                <span class="icon-set white world nh">
                </span>
                <?php echo $this->getChildHtml('dd_language') ?>
            </div>
        </li>
        <li class="middle">
            <a href="<?php echo Mage::getBaseUrl(); ?>" ><span></span></a>
        </li>
        <li class="right-upper">
            <a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" class="upper-links">
                <p><?php echo $this->__('Cart') ?></p>
                <span class="icon-set basket">

                </span>
            </a>
        </li>
    </ul>

    <ul class="mobile-menu">
        <li class="col-xs-4">
            <div id="header-nav" class="header-nav skip-content">
                <div class="mobile-dropdown-menu" for="h-main-menu">
                    <span class="icon-set list"></span>
                    <p><?php echo $this->__('MENU') ?></p>
                </div>
            </div>
        </li>
        <li class="col-xs-4">
            <div id="" class="">
                <div class="mobile-dropdown-menu" for="h-search-menu">
                    <span class="icon-set search purple nh"></span>
                    <p><?php echo $this->__('SEARCH') ?></p>
                </div>
            </div>
        </li>
        <li class="col-xs-4">
            <div id="" class="">
                <div class="mobile-dropdown-menu" for="h-account-menu">
                    <span class="icon-set account purple nh"></span>
                    <p><?php echo $this->__('ACCOUNT') ?></p>
                </div>
            </div>
        </li>
    </ul>

    <ul class="hidden-menu clearfix">
        <li class="h-menu" id="h-main-menu"><?php echo $this->getChildHtml('topMenu') ?></li>
        <li class="h-menu" id="h-search-menu"><?php echo $this->getChildHtml('topSearch') ?></li>
        <li class="h-menu" id="h-account-menu"><?php echo $this->getChildHtml('topLinks') ?></li>
    </ul>
    <div id="sale_banner" class="sale_banner">
        <p><?php echo $this->__('<strong>SALE now on!</strong> Up to 50% off on selected items - ') ?>
            <a style="color:white" href="<?php echo Mage::getBaseUrl(); ?>sale"><u><strong> <?php echo $this->__('SHOP NOW!') ?></strong></u></a>
        </p>

        <div class="countdownList" style="text-align: center;">
            <ul>
                <li></li><span><i><?php echo $this->__('Ends in:') ?>&nbsp&nbsp&nbsp</i></span>
                <li><b><span id="X-days" </span> </b><?php echo $this->__('Days') ?> </li> <li><b><span id="X-hours"></span></b><?php echo $this->__('Hours') ?></li>
                <li><b><span id="X-minutes"></span></b><?php echo $this->__('Minutes') ?></li>
                <li><b><span id="X-seconds"></span></b><?php echo $this->__('Seconds') ?></li>
            </ul>
        </div>
    </div>

</header>

Answer 1

As LukStorms suggest, setInterval require a milliseconds value on delay argument

setInterval(code, delay);

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

I have changed almost nothing in your code:

const one_Sec  = 1000
  ,   one_Min  = one_Sec * 60
  ,   one_Hour = one_Min * 60 
  ,   one_Day  = one_Hour * 24
  ,  countDown = new Date('Jan 31, 2020 23:59:59').getTime()
  ,  X_count   = { days    : document.getElementById('X-days')
                 , hours   : document.getElementById('X-hours')
                 , minutes : document.getElementById('X-minutes')
                 , seconds : document.getElementById('X-seconds')
                 }
  ;
setInterval(_=>
  {
  let now = new Date().getTime()
    , tim = countDown - now
    ;
  X_count.days.textContent    = Math.floor(tim / one_Day) 
  X_count.hours.textContent   = Math.floor((tim % one_Day ) / one_Hour )
  X_count.minutes.textContent = Math.floor((tim % one_Hour) / one_Min  )
  X_count.seconds.textContent = Math.floor((tim % one_Min ) / one_Sec  )
  }
  , one_Sec); // -> indicate here a delay value !

.countdownList li {
  display        : inline-block;
  padding-right  : 1em;
  font-size      : 0.9em;
  list-style-type: none;
  text-transform : uppercase;
  line-height    : 16px;
  font-family    : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.countdownList li span {
  display     : block;
}

<div id="sale_banner" class="sale_banner">
  <p>
    <strong>SALE now on!</strong> Up to 50% off on selected items -
  </p>

  <div class="countdownList" style="text-align: center;">
    <ul>
      <li></li><span>Ends in:</span>
      <li><b><span id="X-days" </span> </b>Days </li> <li><b><span id="X-hours"></span></b>Hours</li>
      <li><b><span id="X-minutes"></span></b>Minutes</li>
      <li><b><span id="X-seconds"></span></b>Seconds</li>
    </ul>
  </div>
</div>