Someone help i can't figure out what is needed in this code

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<style>
.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;
  grid-template-areas:
    "header"
    "advert"
    "content"
    "footer";
}

@media (min-width: 300px){
  .container{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
}

@media (min-width: 400px){
  .container{
    grid-template-areas:
    /* Only change code below this line */
     
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
      "advert header"
      "advert content"
      "advert footer";
    /* Only change code above this line */
  }
}
</style>

<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:

Hi
You need to work on the media query that says (min-width:400px). It wants you to make the header take up the whole top row, currently the top row is shared between advert and header. Then you need to make footer occupy the whole bottom row, currently the bottom row is shared between advert and footer.
Reset the lesson and start it again. Only change the grid-template-areas property.
You may want to re read the grid template areas lesson if not sure. Youtube has good videos on it as well if you need more help

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.