Why does the content disappear when media query activates?

I'm creating a base HTML template for a responsive website, the media query works, but the content related to that screen size disappears.

This is my code:

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }
  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>

When the screen size gets to the activation size of the media query, it does work (the background color changes), however, the content for that specific media query size disappears. Why does this happen and how do I fix this to make sure that when the media query activates, the correct content div displays?

Solution

It's because you aren't setting your divs to be visible in the media query so it's only hiding new ones and changing the body color. Which means you're ending up with .regular, .mobile, and .tablet all hidden and none of them displaying.

In each media query you need to add:

.mobile {display: block;}

.tablet {display: block;}

This should work:

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }

  .mobile {
    display: block;
  }

  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  
  .tablet {
    display: block;
  }

  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>