CSS media query not responding in GRID

Question

index.html

This is the index file with a hero image and hero content(title and subtitle)

 <section class= 'container main-section grid'>
  <div class="hero-content">
    <div class="title">
      <h1>Hi, I'm Megha</h1>
    </div>
    <div class="subtitle">
      <p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
    </div>
  </div>
  <div class='image-wrapper'>
    <div class='girl-image'></div>
  </div>

styles.css

Code for overlapping hero content and hero image using CSS grid.

.grid {
  display: grid; 
  grid-template-columns: 2fr 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
  margin-top: 80px;
  gap: 20px;

}

.hero-content {
 
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
  z-index: 1;
  margin-top: -50px;
  align-content: center;
  max-width: 80vh;
  
}
.hero-content .title {
  font-family: blackjack;
  font-size: 24px;
  color: #16161D;
}

.hero-content .subtitle {
  font-family: futurapt;
  font-size: 22px;
  color: #363636
}
.image-wrapper {
  grid-column: 2/span 3;
  grid-row: 1/span 2;
}

index.css

Code for changing responsive layout with hero content on top and image on the bottom.

@media only screen and (max-width: 1249px) {
  
  header, .hero-content, .social-icons, .image-wrapper {
    margin: 0 20px;
  }
}

@media only screen and (max-width: 535px) {
  
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr;
   
  }
   .hero-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    
  }
  .image-wrapper {
    grid-column: 1;
    grid-row: 3 / span 4;
  } 
}

The code does not work for responsive design for max-width 535px. I've been looking for a long while. Any help would be much appreciated.

Basically I want to change layout for mobile with a single column and 4 rows. This doesn't work. Why??

Answer 1

I've added a bit of CSS to your girl-image class so we could visualize where it currently lands in your grid. Your hero content DOES overlap your hero image at higher viewport widths. But on mobile, the hero image is under your hero content.

.girl-image {
  background-color: cornflowerblue;
  height: 100%;
  width: 100%;
}

This is what your mobile layout looks like right now:

If you go above 535px, you get the image below:

.grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
  margin-top: 80px;
  gap: 20px;
}

.hero-content {
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
  z-index: 1;
  margin-top: -50px;
  align-content: center;
  max-width: 80vh;
}
.hero-content .title {
  font-family: blackjack;
  font-size: 24px;
  color: #16161d;
}

.hero-content .subtitle {
  font-family: futurapt;
  font-size: 22px;
  color: #363636;
}
.image-wrapper {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

.girl-image {
  background-color: cornflowerblue;
  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 1249px) {
  header,
  .hero-content,
  .social-icons,
  .image-wrapper {
    margin: 0 20px;
  }
}

@media only screen and (max-width: 535px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr;
  }
  .hero-content {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .image-wrapper {
    grid-column: 1;
    grid-row: 3 / span 4;
  }
}

  <section class='container main-section grid'>
    <div class="hero-content">
      <div class="title">
        <h1>Hi, I'm Megha</h1>
      </div>
      <div class="subtitle">
        <p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
      </div>
    </div>
    <div class='image-wrapper'>
      <div class='girl-image'></div>
    </div>
  </section>