Countdown disappears when I look on mobile device - html

Question

This is the html and css code I use. When I look on a mobile device or when I shrink my screen the countdown disappears, but the text not. I have added the other part of the css. Now I added all the css of the page, so the upper part is from my navbar I used in my html. I added the JS aswell. I hope someone knows how to fix this problem. Thank you in advance! I added the whole html aswell. I hope you know a solution for all the problems!
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav{
background: #151515;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 10px #0a0a0a;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
text-align:center;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
background-color:red;
color: white;
border-radius:5px;
}
.icon{
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>

Answer 1

The reason is because in your media query you have this:
.show + a, ul{
display: none;
}
You are hiding all ul elements. Remove that and you'll see your numbers. You may need to keep the .show + a, but the ul is what is causing it to be hidden.
.show + a, nav > ul{
display: none;
}
This makes sure not every ul is targeted, but just the top level one in your menu.
EDIT In the comment you mention about your nav menu not collapsing. You can do this (or something similar since I don't have all the code):
EDIT 2 You are seeing the ::before font awesome elements before your numbers because all the spans are getting the .cancel class added. The following CSS will fix that.
#countdown li span.cancel::before {
display: none;
}
(function() {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav {
background: #151515;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul {
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li {
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a {
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000, 0 0 10px #0a0a0a;
}
nav ul ul li a:hover {
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul {
border-top: none;
}
nav ul li:hover>ul {
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li {
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
text-align: center;
}
nav ul ul li a {
line-height: 50px;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
.show,
.icon,
input {
display: none;
}
.fa-plus {
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul {
margin-right: 0px;
float: left;
}
nav .logo {
padding-left: 30px;
width: 100%;
}
nav ul li,
nav ul ul li {
display: block;
width: 100%;
}
nav ul li a:hover {
box-shadow: none;
}
.show {
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show+a,
nav>ul {
display: none;
}
.show:hover {
background-color: red;
color: white;
border-radius: 5px;
}
.icon {
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul {
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a {
padding-left: 40px;
}
nav ul ul ul a {
padding-left: 80px;
}
nav ul ul ul li {
position: static;
}
[id^=btn]:checked+ul {
display: block;
}
nav ul ul li {
border-bottom: 0px;
}
span.cancel:before {
content: '\f00d';
}
#countdown li span.cancel::before {
display: none;
}
}
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function() {
$('span').toggleClass("cancel");
});
</script>
</body>
</html>