Thanks if you can help me

[tonyredsea2022]

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: 400px;
    /* Only change code below this line */
      "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 6.3; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:

freeCodeCamp.org

[bappyasif]

its simple, if you know how ‘column / row range’ syntax works in grid

@tonyredsea2022

 "advert header"
      "advert content"
      "advert footer";

• that given code is spanning in ‘3 rows’ and 2 ’ columns’ each
• each column has two different elements in it

now as instructions asked, you need to have ‘same element’ both in ‘header and footer’, thats it!!

so if you know how to make rows 'spanning over multiple columns then that should do it!!

happy learning