Responsive Layout Help needed

HTML-CSS
1

Please help me find where my error is in this lesson.
I’ve added header and footer on the top and bottom so they can stretch out at 400px min; and thats what the lesson is asking of me, (I think)

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 */
      "header header"
      "advert content"
      "footer 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/80.0.3987.122 Safari/537.36.

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

2

seems correct
try removing the comments, there have been a few challenges that have issues with the comments

3

That was it! Thank you!
Question, What should I have looked for so I could of figured that out for myself?

4

the github repository, where bug issues are opened, the #support subforum here… places like that are where you can find if there are known bugs for those challenges

also there have been various thread opened in this subforum for help with this challenge, and all have the same answer of removing the comments as there is a bug

but before opening a bug issue, always ask on the forum to see if your code is correct

5

Thank you, I recently joined Github and was trying to figure out how I should use it to help me learn coding.

6

you can browse other people projects, you can host your own projects (you can host front end websites in github pages!), you can contribute to open source…

it will be easier to deal with github once you learn Git - search a bit about it