Use Media Queries to Create Responsive Layouts, I'm confused on what to do here, pls help

Tell us what’s happening:

Your code so far

  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  .item4 {
    background: lightpink;
    grid-area: footer;
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
  @media (min-width: 300px){
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
        "advert header"
        "advert content"
        "advert footer";
  @media (min-width: 400px){
      /* change the code below this line */
        "advert header"
        "advert content"
        "advert footer";
    /* change the code above this line */
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; Infinix X559C) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.143 Mobile Safari/537.36.

Link to the challenge:

you need to change this part, read carefully the challenge instructions
when the width is 400px or more you need to make the header occupy the whole first row and the footer occupy the whole last row

Hey @lucas2 to complete this challenge you need to change the code in the second media queries code.

I looked at your code, and currently you are telling the browser that when the viewport has a min-width of 400px, the grid-template-areas should be “advert header” “adverst content” and “advert footer”;. So you need to change the grid-template-areas according to the requirements and have the grid-template-areas “header header” “advert content” “footer footer” when the min-width is 400px.