Need Help making this responsive - CSS/HTML/JS

Question

I have been trying to make this countdown timer responsive for mobile and smaller devices responses and am struggling. Ideally, I want the distance between the flex attribute to shrink as the screen gets smaller allowing the countdown to come closer to one another so that it fits on the screen at any size. However, I do not know how to do so. So I attempted to put 'flex-direction: column' in the @media section but nothing happened. I also tried to reduce the size of the countdown timers as the screen got smaller but that did not help either.

const countdown = document.querySelector(".countdown");

const interval = setInterval(() => {
  const deadline = new Date(2021, 11, 15, 12, 00, 00);

  const current = new Date();

  const diff = deadline - current;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24)) + "";
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24) + "";
  const minutes = Math.floor((diff / (1000 * 60)) % 60) + "";
  const seconds = Math.floor((diff / 1000) % 60) + "";

  countdown.innerHTML = `
    <div data-content="Days">${days.length === 1 ? `0${days}` : days}</div>
    <div data-content="Hours">${hours.length === 1 ? `0${hours}` : hours}</div>
    <div data-content="Minutes">${
      minutes.length === 1 ? `0${minutes}` : minutes
    }</div>
    <div data-content="Seconds">${
      seconds.length === 1 ? `0${seconds}` : seconds
    }</div>
`;

  if (diff < 0) {
    clearInterval(interval);
    countdown.innerHTML = "<h1>Countdown is over!</h1>";
  }

  document.querySelector(".reset").addEventListener("click", () => {
    clearInterval(interval);

    const divs = document.querySelectorAll(".countdown div");

    divs.forEach((div) => {
      div.innerHTML = "00";
    });
  });
}, 1000);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Baloo da 2", cursive;
}

html {
  font-size: 62.5%;
}



.countdown-wrapper {
  width: 100%;
  position: relative;
  top: 15%;
  text-align: center;
  color: #ddd;
}

.countdown-wrapper h1 {
  font-size: 8rem;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 8rem;
  text-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.5);
}

.countdown {
  display: flex;
  justify-content: center;
}

.countdown div {
  width: 13rem;
  height: 13rem;
  background: linear-gradient(
    to bottom,
    rgba(61, 58, 58, 0.9) 50%,
    rgba(99, 93, 93, 0.9) 0
  );
  margin: 0 4rem 12rem 4rem;
  font-size: 7rem;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
  position: relative;
}

.countdown div::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.24rem;
  background-color: #17181b;
}

.countdown div::after {
  content: attr(data-content);
  font-size: 2.2rem;
  font-weight: 400;
  position: absolute;
  bottom: -6rem;
}

/*===============  Responsive Section ===============*/

/* For small devices */
@media screen and (min-width: 320px){
  .countdown div {
    width: 8rem;
    height: 4rem;
    background: linear-gradient(
      to bottom,
      rgba(16, 15, 15, 0.9) 50%,
      rgba(57, 53, 53, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 2.5rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
    position: relative;
  }  
}

/* For medium devices */
@media screen and (min-width: 576px){
  .countdown div {
    width: 10rem;
    height: 10rem;
    background: linear-gradient(
      to bottom,
      rgba(61, 58, 58, 0.9) 50%,
      rgba(99, 93, 93, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 5rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
    position: relative;
  }
}

@media screen and (min-width: 767px){
  .countdown div {
    width: 12rem;
    height: 12rem;
    background: linear-gradient(
      to bottom,
      rgba(61, 58, 58, 0.9) 50%,
      rgba(99, 93, 93, 0.9) 0
    );
    margin: 0 4rem 12rem 4rem;
    font-size: 7rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
    position: relative;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Countdown</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="countdown-wrapper">
        <h1>Coming Soon...</h1>
        <div class="countdown"></div>
      </div>
    </div>

    <p>countdown timer</p>

    <script src="script.js"></script>
  </body>
</html>

Answer 1

You will need to alter the margin size for each responsive breakpoint in order to make it properly responsive. It is ordered from left to right top distance | right | bottom | left.

  margin: 0 1rem 1rem 1rem; 

Answer 2

If you want the distance between the boxes to reduce, then change the "margin" sizes for each screen size. For example, for the smallest screen, change your margin to this:

margin: 0 1rem 1rem 1rem; /*these by order are: top distance | right | bottom | left */

Distance between blocks is pretty much always based on padding and margins of those elements (padding is inner distance between element's content and the border of the element, while margins are representing distance between the border of the element and outside (other) elements), so always fiddle with them first.

Also, don't forget to add the ".countdown div::after" for each of those screen sizes, since your text "Days/hours/etc" will be cramped up all together. So change the font size to 1.2rem in the smallest screen size for this example.