Creating media query for web layouts

Tell us what’s happening:

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{
    /* change the code below this line */

    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";

  /* change the code above this line */
  }
}
</style>

<div class="container">
<div class="item1">header</div>
<div class="item2">header</div>
<div class="item3">footer</div>
<div class="item4">footer</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0.

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts

the goal for this test is “make the header area occupy the top row completely and the footer area occupy the bottom row completely” when viewport is more than 400px.

image