Responsive CSS works on mobile but not on desktop

Question

I have this pretty crowded design which I'm having trouble to make responsive. Basically with the "max-width:1024px" media query the whole layout fits when when in mobile mode, as this mode tries to fit everything in the window, if I've understood correctly.

The problem is that for the same screen size but whithout the mobile mode, it doesn't fit at all. If in the media query I make the height of the window bigger, lets say 140vh, then if works well on desktop but on mobile mode all the elements are too far appart.

Basically I wonder how to make a layout work for mobiles and desktops of the same size.

here is the code :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');

:root {
    --primary: #252b42;
    --green: #1eb589;
    --red: #dc414c;
    --blue: #1da1f2;
    --bc: #20222f;
    --text-light: #8c98c6;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* TOOLS */
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.font-white {
    color: white;
}
.font-grey {
    color: var(--text-light);
}
.font-green {
    color: var(--green);
}
.font-red {
    color: var(--red);
}

/* FONTS */
html {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
h1 {
    font-size: 2rem;
    font-weight: bold;
}
h2 {
    font-size: 1rem;
    font-weight: bold;
}
h3 {
    font-size: 0.9rem;
    font-weight: bold;
}
h4 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 48px;
    letter-spacing: -2px;
}
h5 {
    font-weight: 400;
    letter-spacing: 5px;
}
h6 {
    font-size: 0.9rem;
    font-weight: bold;
}
.number {
    font-size: 2.3rem;
    font-weight: bold;
}

/* ///////////////////////////////////////////// */

/* BODY */
body {
    background-color: var(--bc);
    /* overflow-y: hidden; */
}
.wrapper {
    flex-direction: column;
    height: 100vh;
    /* margin: 2rem auto 4rem; */
    margin: 0 auto;
    width: 80%;
    justify-content: space-evenly;
}
/* Header */
header {
    justify-content: space-between;
}
.dark-mode {
    flex-direction: row;
    align-items: center;
    justify-self: space-between;
}

/* DASHBOARD */

.dashboard {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: space-between;
    column-gap: 28px;
}
/* Grid items */
.dashboard .grid-item {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* width: 255px; */
    height: 216px;
    border-radius: 5px;
    background-color: var(--primary);
}
.color {
    height: 3px;
    width: 100%;
    display: fixed;
    /* margin-top: -2rem; */
    position: absolute;
    top: 0;
    border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
    background-color: var(--blue);
}
#ig {
    background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
    background-color: var(--red);
}
.network {
    display: flex;
    align-items: center;
}
.network .pseudo {
    margin-left: 4px;
}
.followers {
    align-items: center;
}
.number-followers {
    text-align: center;
}
.unit {
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: center;
}
.today {
    display: flex;
    align-items: center;
}
.today img {
    height: 4px;
    margin-right: 5px;
}

/* OVERVIEW */

.overview {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 28px;
}
.overview .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 125px;
    border-radius: 5px;
    background-color: var(--primary);
}
.top-half,
.bottom-half {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

/* HOVER STATES */
.grid-item {
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.grid-item:hover {
    background-color: #333a55;
}

/* RESPONSIVENESS */

@media screen and(max-width: 1280px) {
    html {
        font-size: 13px;
    }

    /* .grid-item {
        width: 215px;
    } */
}

/* Smaller screens */

@media screen and (max-width: 1024px) {
    .wrapper {
        width: 90%;
        /* height: 140vh; */
    }
    .grid {
        grid-gap: 17px;
    }
    /* bottom grid */
    .overview {
        grid-template-columns: repeat(3, 1fr);
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
        <!-- displays site properly based on user's device -->

        <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="./images/favicon-32x32.png"
        />
        <link rel="stylesheet" href="style.css" />

        <title>Frontend Mentor | [Challenge Name Here]</title>

        <!-- Feel free to remove these styles or customise in your own stylesheet ???? -->
        <style>
            .attribution {
                font-size: 11px;
                text-align: center;
            }
            .attribution a {
                color: hsl(228, 45%, 44%);
            }
        </style>
    </head>

    <body>
        <div class="wrapper flex">
        <header class="flex">
            <div class="title">
                <h1 class="title-1 font-white">Social Media Dashboard</h1>
                <h2 class="font-grey">Total Followers: 23,004</h2>
            </div>
            <div class="dark-mode flex">
                <h2 class="font-grey">Dark Mode</h2>
                <button class="dark-mode-btn"></button>
            </div>
        </header>
        <div class="dashboard grid">
            <div class="grid-item flex">
                <div class="color" id="blue"></div>
                <div class="network">
                    <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1987</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
            </div>
            <div class="grid-item flex">
                <div class="color "id="blue"></div>

                <div class="network">
        
                    <img src="./images/icon-twitter.svg" alt="" class="social-icon" />
                
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1044</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>

            </div>
            <div class="grid-item flex">
                <div class="color" id="ig" ></div>

                <div class="network">
                    <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@realnathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">11k</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
            </div>
            <div class="grid-item flex">
                <div class="color" id="red"></div>
                <div class="network">
                    <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">Nathan F.</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">8239</h4>
                    <h5 class="unit font-grey">Subscribers</h5>
                </div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6  class="font-red">144  Today</h6></div>
            </div>
        </div>
        <h1 class="title-2 font-white">Overview - Today</h1>
        <div class="overview grid">

            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Page Views</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">87</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">5462</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Profile Views</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52k</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Retweets</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">117</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">507</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">107</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Total Views</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">1407</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
                </div>
            </div>
        </div>
          

        <div class="attribution">
            Challenge by
            <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
                >Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
        </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>

Answer 1

CSS Grid auto-fill and auto-fit

You have your code set up nicely! What's great about CSS Grid is you don't actually have to utilize @media queries for the functionality you're looking for. Using the minmax() function in CSS, along with the grid auto-fill and auto-fit, you can implement a responsive design that serves nicely with what you currently have.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
  --primary: #252b42;
  --green: #1eb589;
  --red: #dc414c;
  --blue: #1da1f2;
  --bc: #20222f;
  --text-light: #8c98c6;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* TOOLS */

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.font-white {
  color: white;
}

.font-grey {
  color: var(--text-light);
}

.font-green {
  color: var(--green);
}

.font-red {
  color: var(--red);
}


/* FONTS */

html {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1rem;
  font-weight: bold;
}

h3 {
  font-size: 0.9rem;
  font-weight: bold;
}

h4 {
  font-size: 4rem;
  font-weight: bold;
  line-height: 48px;
  letter-spacing: -2px;
}

h5 {
  font-weight: 400;
  letter-spacing: 5px;
}

h6 {
  font-size: 0.9rem;
  font-weight: bold;
}

.number {
  font-size: 2.3rem;
  font-weight: bold;
}


/* ///////////////////////////////////////////// */


/* BODY */

body {
  background-color: var(--bc);
  /* overflow-y: hidden; */
}

.wrapper {
  flex-direction: column;
  height: 100vh;
  /* margin: 2rem auto 4rem; */
  margin: 0 auto;
  width: 80%;
  justify-content: space-evenly;
}


/* Header */

header {
  justify-content: space-between;
}

.dark-mode {
  flex-direction: row;
  align-items: center;
  justify-self: space-between;
}


/* DASHBOARD */

.dashboard {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 1fr;
  justify-content: space-between;
  column-gap: 28px;
}


/* Grid items */

.dashboard .grid-item {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  /* width: 255px; */
  height: 216px;
  border-radius: 5px;
  background-color: var(--primary);
}

.color {
  height: 3px;
  width: 100%;
  display: fixed;
  /* margin-top: -2rem; */
  position: absolute;
  top: 0;
  border-radius: 5px 5px 0 0;
}


/* sticker colors */

#blue {
  background-color: var(--blue);
}

#ig {
  background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}

#red {
  background-color: var(--red);
}

.network {
  display: flex;
  align-items: center;
}

.network .pseudo {
  margin-left: 4px;
}

.followers {
  align-items: center;
}

.number-followers {
  text-align: center;
}

.unit {
  margin-top: 1rem;
  text-transform: uppercase;
  text-align: center;
}

.today {
  display: flex;
  align-items: center;
}

.today img {
  height: 4px;
  margin-right: 5px;
}


/* OVERVIEW */

.overview {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 28px;
}

.overview .grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 125px;
  border-radius: 5px;
  background-color: var(--primary);
}

.top-half,
.bottom-half {
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}


/* HOVER STATES */

.grid-item {
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.grid-item:hover {
  background-color: #333a55;
}


/* RESPONSIVENESS */

@media screen and(max-width: 1280px) {
  html {
    font-size: 13px;
  }
  /* .grid-item {
        width: 215px;
    } */
}


/* Smaller screens */

@media screen and (max-width: 1024px) {
  .wrapper {
    width: 90%;
    /* height: 140vh; */
  }
  .grid {
    gap: 17px;
  }
}

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
  <link rel="stylesheet" href="style.css" />

  <title>Frontend Mentor | [Challenge Name Here]</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }
    
    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <div class="wrapper flex">
    <header class="flex">
      <div class="title">
        <h1 class="title-1 font-white">Social Media Dashboard</h1>
        <h2 class="font-grey">Total Followers: 23,004</h2>
      </div>
      <div class="dark-mode flex">
        <h2 class="font-grey">Dark Mode</h2>
        <button class="dark-mode-btn"></button>
      </div>
    </header>
    <div class="dashboard grid">
      <div class="grid-item flex">
        <div class="color" id="blue"></div>
        <div class="network">
          <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">@nathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">1987</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">12 Today</h6>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="color " id="blue"></div>

        <div class="network">

          <img src="./images/icon-twitter.svg" alt="" class="social-icon" />

          <h3 class="pseudo font-grey">@nathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">1044</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">99 Today</h6>
        </div>

      </div>
      <div class="grid-item flex">
        <div class="color" id="ig"></div>

        <div class="network">
          <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">@realnathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">11k</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">1099 Today</h6 class="font-green">
        </div>
      </div>
      <div class="grid-item flex">
        <div class="color" id="red"></div>
        <div class="network">
          <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">Nathan F.</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">8239</h4>
          <h5 class="unit font-grey">Subscribers</h5>
        </div>
        <div class="today"><img src="./images/icon-down.svg"></img>
          <h6 class="font-red">144 Today</h6>
        </div>
      </div>
    </div>
    <h1 class="title-2 font-white">Overview - Today</h1>
    <div class="overview grid">

      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Page Views</h2>
          <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">87</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">3%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">52</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">2%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">5462</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">2257%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Profile Views</h2>
          <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">52k</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">1375%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Retweets</h2>
          <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">117</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">303%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">507</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">553%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">107</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">19%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Total Views</h2>
          <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">1407</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">12%</h6>
          </div>
        </div>
      </div>
    </div>


    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
    </div>
  </div>
  <script src="./app.js"></script>
</body>

</html>

The properties changed:

.overview {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dashboard {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

What is happening here is the following:

1. A repeat function is implementing an auto-fit behaviour
2. The minimum width of all grid containers must be 200px in the first example, and 300px in the second example
3. Once the containers become less than that width, those containers move on to the next row (a new row is created if there aren't any available)
4. If the containers exceed the minimum width, they take up all available space (1fr/1 fractional unit)

This allows you to have a responsive grid container without complex and excessive media queries (although your's weren't complex). Usually many have a problem where the grid-containers overflow the width of the screen, but it seems you have everything set up correctly.

If you'd like to explore grid auto-fill and auto-fit (and the differences that weren't discussed in this answer), check out this great article by CSS-Tricks.

Answer 2

For the responsive layout you can use grid auto-fit like Raheel Junaid's answer. But also you can only use flex without display grid.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');

:root {
    --primary: #252b42;
    --green: #1eb589;
    --red: #dc414c;
    --blue: #1da1f2;
    --bc: #20222f;
    --text-light: #8c98c6;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* TOOLS */
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.font-white {
    color: white;
}
.font-grey {
    color: var(--text-light);
}
.font-green {
    color: var(--green);
}
.font-red {
    color: var(--red);
}

/* FONTS */
html {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
h1 {
    font-size: 2rem;
    font-weight: bold;
}
h2 {
    font-size: 1rem;
    font-weight: bold;
}
h3 {
    font-size: 0.9rem;
    font-weight: bold;
}
h4 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 48px;
    letter-spacing: -2px;
}
h5 {
    font-weight: 400;
    letter-spacing: 5px;
}
h6 {
    font-size: 0.9rem;
    font-weight: bold;
}
.number {
    font-size: 2.3rem;
    font-weight: bold;
}

/* ///////////////////////////////////////////// */

/* BODY */
body {
  background-color: var(--bc);
  /* overflow-y: hidden; */
}
.wrapper {
  flex-direction: column;
  height: 100vh;
  /* margin: 2rem auto 4rem; */
  margin: 0 auto;
  width: 80%;
  justify-content: space-evenly;
}
/* Header */
header {
    justify-content: space-between;
}
.dark-mode {
    flex-direction: row;
    align-items: center;
    justify-self: space-between;
}

/* DASHBOARD */

.dashboard {
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* grid-template-rows: 1fr; */
    /* justify-content: space-between; */
    /* column-gap: 28px; */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Grid items */
.dashboard .grid-item {
    flex-basis: calc(calc(700px - 100%) * 9999);
    flex-shrink: 1;
    flex-grow: 1;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* width: 255px; */
    height: 216px;
    border-radius: 5px;
    background-color: var(--primary);
}
.color {
    height: 3px;
    width: 100%;
    display: fixed;
    /* margin-top: -2rem; */
    position: absolute;
    top: 0;
    border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
    background-color: var(--blue);
}
#ig {
    background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
    background-color: var(--red);
}
.network {
    display: flex;
    align-items: center;
}
.network .pseudo {
    margin-left: 4px;
}
.followers {
    align-items: center;
}
.number-followers {
    text-align: center;
}
.unit {
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: center;
}
.today {
    display: flex;
    align-items: center;
}
.today img {
    height: 4px;
    margin-right: 5px;
}

/* OVERVIEW */

.overview {
    /* grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 28px; */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.overview .grid-item {
    flex-basis: 300px;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 125px;
    border-radius: 5px;
    background-color: var(--primary);
}
.top-half,
.bottom-half {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

/* HOVER STATES */
.grid-item {
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.grid-item:hover {
    background-color: #333a55;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
        <!-- displays site properly based on user's device -->

        <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="./images/favicon-32x32.png"
        />
        <link rel="stylesheet" href="style.css" />

        <title>Frontend Mentor | [Challenge Name Here]</title>

        <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
        <style>
            .attribution {
                font-size: 11px;
                text-align: center;
            }
            .attribution a {
                color: hsl(228, 45%, 44%);
            }
        </style>
    </head>

    <body>
        <div class="wrapper flex">
        <header class="flex">
            <div class="title">
                <h1 class="title-1 font-white">Social Media Dashboard</h1>
                <h2 class="font-grey">Total Followers: 23,004</h2>
            </div>
            <div class="dark-mode flex">
                <h2 class="font-grey">Dark Mode</h2>
                <button class="dark-mode-btn"></button>
            </div>
        </header>
        <div class="dashboard">
            <div class="grid-item flex">
                <div class="color" id="blue"></div>
                <div class="network">
                    <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1987</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
            </div>
            <div class="grid-item flex">
                <div class="color "id="blue"></div>

                <div class="network">
        
                    <img src="./images/icon-twitter.svg" alt="" class="social-icon" />
                
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1044</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>

            </div>
            <div class="grid-item flex">
                <div class="color" id="ig" ></div>

                <div class="network">
                    <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@realnathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">11k</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
            </div>
            <div class="grid-item flex">
                <div class="color" id="red"></div>
                <div class="network">
                    <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">Nathan F.</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">8239</h4>
                    <h5 class="unit font-grey">Subscribers</h5>
                </div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6  class="font-red">144  Today</h6></div>
            </div>
        </div>
        <h1 class="title-2 font-white">Overview - Today</h1>
        <div class="overview">

            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Page Views</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">87</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">5462</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Profile Views</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52k</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Retweets</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">117</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">507</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">107</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Total Views</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">1407</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
                </div>
            </div>
        </div>
          

        <div class="attribution">
            Challenge by
            <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
                >Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
        </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>

The changes are:

.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard .grid-item {
    flex-basis: calc(calc(700px - 100%) * 9999);
    flex-shrink: 1;
    flex-grow: 1;
}

.overview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.overview .grid-item {
    flex-basis: 300px;
    flex-shrink: 1;
    flex-grow: 1;
}

I was adding flex-basis, flex-shrink, and flex-grow properties to .dashboard and .overview children.

• flex-basis will sets the main size of flex item.
• For example if we set the basis 300px the width will be 300px. But we have flex-grow and flex-shrink that allows child to grow or shrink from its main size if the value is 1.
• flex-shrink default value is 1
• flex-grow default value is 0
• when the parent width > 600px it will have 2 columns (600px / 2 = 300px)
• when the parent width < 300px the child will shrink if the flex-shrink value = 1
• when the parent width is 400px the child will grow to 400px if the flex-grow value = 1
• negative flex-basis value is invalid.
• for the calc(calc(700px - 100%) * 9999); when the parent width hits < 700px the flex-basis will have big value that will make parent only have one column. When the parent width is > 700px the basis value will be negative number, then the flex-basis will sets to the default value which is auto.