CSS Grid not being fully responsive-CodePudding

I'm coding a challenge from Frontend Mentor (this one), and I was able to do so. However, I was not able to make it 100% responsive. It only works when the page width reaches the one I specified on the media query. The grid content is not adjusting itself while I make my browser window smaller or bigger, as it should.

This one is an example of how it should work.

body,
html {
  background-color: hsl(210, 46%, 95%);
  font-family: 'Barlow Semi Condensed', sans-serif;
  Font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.container {
  width: 1440px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "t1 t1 t2 t3" "t4 t5 t5 t3";
  grid-gap: 2.5rem;
}

.testimonial01,
.testimonial02,
.testimonial05 {
  color: white;
}

.testimonial04,
.testimonial03 {
  color: hsl(217, 19%, 35%);
}

.container>div {
  padding: 2rem;
}

.author {
  display: flex;
  width: 180px;
  align-items: center;
}

span,
h3 {
  opacity: 50%;
  line-height: 1.6;
}

img {
  width: 3rem;
  border-radius: 50%;
  border: 1px solid white;
  margin-right: 20px;
}

.testimonial01 {
  grid-area: t1;
  background-color: hsl(263, 55%, 52%);
  border-radius: 15px;
}

.testimonial02 {
  grid-area: t2;
  background-color: hsl(217, 19%, 35%);
  border-radius: 15px;
}

.testimonial03 {
  grid-area: t3;
  background-color: hsl(0, 0%, 100%);
  border-radius: 15px;
}

.testimonial04 {
  grid-area: t4;
  background-color: hsl(0, 0%, 100%);
  border-radius: 15px;
}

.testimonial05 {
  grid-area: t5;
  background-color: hsl(219, 29%, 14%);
  border-radius: 15px;
}

@media screen and (max-width: 600px) {
  .container {
    width: 375px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "t1" "t2" "t3" "t4" "t5";
  }
}

<!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.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow Semi Condensed:wght@500;600&display=swap" rel="stylesheet">
  <title>Testimonials</title>
</head>

<body>
  <div >

    <div >

      <div >
        <img src="./images/image-daniel.jpg" alt="">
        <p>Daniel Clifford <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</h1>

      <h3>" I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly
        thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</h3>

    </div>

    <div >

      <div >
        <img src="./images/image-jonathan.jpg" alt="">
        <p>Jonathan Walters <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>The team was very supportive and kept me motivated</h1>

      <h3>“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</h3>

    </div>

    <div >

      <div >
        <img src="./images/image-kira.jpg" alt="">
        <p>Kira Whittle <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>Such a life-changing experience. Highly recommended!</h1>

      <h3>“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things
        about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way
        that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</h3>

    </div>

    <div >

      <div >
        <img src="./images/image-jeanette.jpg" alt="">
        <p>Jeanette Wittle <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>An overall wonderful and rewarding experience</h1>

      <h3>“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</h3>

    </div>
    <div >

      <div >
        <img src="./images/image-patrick.jpg" alt="">
        <p>Patrick Abrams <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</h1>

      <h3>“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest.
        You will get the personal attention you need from an incredible community of smart and amazing people. ”</h3>

    </div>

  </div>
</body>

</html>

CodePudding user response：

Try adding a min-width value to your media query and changing the width on the container class to max-width.