Can't get grid-template-areas to change with media query

HTML-CSS
1

Hi so I’m working on my portfolio site, specifically the “About Me” section. I am having a super rough time trying to get these two grid items to rearrange according to the size of the screen (using @media query).

Here’s my code for that section (along with the query):

/* WELCOME SECTION */
.welcome-section {
  justify-content: center;
  align-items: center;
  text-align: center;
  //color: #dad120;
  color: $header__color;
  padding: 100px 0;
  background-color: #43464B;

  .biography-grid{
    display: grid;
    grid-template-areas:
      "item1"
      "item2";
    align-items: center;
    margin: 10px auto;
    padding: 10px;
    height: 100%;
    width: 90%;

    .item1 {
      grid-area: item1;
      img{
        margin: auto;
        height: 70%;
        width: 70%;
        border-radius: 50%;

      }
    }

    .item2 {
      grid-area: item2;
    }
  }
}

@media (min-width: 1200px) {
  .biography-grid {
    grid-template-areas:
      "item1 item2";

  }
}

So on the bottom the media query is saying that for a screen that is 1200 pixels or bigger, the two grid items should be right next to each other. But when I refresh my page, I’m getting this:

15%20PM
15%20PM2880×1804 969 KB

(Here I am previewing what the page should look like when the screen is 1440px-wide; clearly the picture should be next to the text, not on top of it)

I know that I initialized grid-template-areas to put the picture on top of the text in the “About Me” section, but why is it doing this when I clearly specified how I wanted it in the media query?

2

The specificity for the .biography-grid selector in the media query is lower than the one nested inside .welcome-section

.welcome-section .biography-grid

vs

.biography-grid

You can either move the media query inside the same nested selector or add the .welcome-section class to it.

3

That did the trick! Thank you so much!