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>

document.querySelector(".reset").addEventListener("click", () => { clearInterval(interval); Where is your reset class? — TBA
– TBA, Commented Oct 20, 2021 at 8:47
Please a) fix your snippet so it does not throw errors (there's no reset button, remove the inclusion of style.css) and b) illustrate with a sketch, what you want the countdown to look like on small screens — Taxel
– Taxel, Commented Oct 20, 2021 at 8:48

Vedran · Accepted Answer · 2021-10-20 09:08:25Z

1

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.

edited Oct 20, 2021 at 9:08

answered Oct 20, 2021 at 9:02

Vedran

2132 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ohmygodimpregnant · Accepted Answer · 2022-10-29 03:29:25Z

0

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;

answered Oct 29, 2022 at 3:29

ohmygodimpregnant

2351 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

Need Help making this responsive - CSS/HTML/JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related