Use Media Queries to Create Responsive Layouts, not passing?

HTML-CSS
1

Tell us what’s happening:

I have no idea why this is not passing.

Your code so far

  @media (min-width: 400px){
    .container{
      /* change the code below this line */
      
      grid-template-areas:
        "footer"
        "advert content"
        "header";
    
    /* change the code above this line */
    }
  }

Your browser information:

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

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

2 Likes
2

First your footer should be on the bottom.

You have two columns, you need to account for both columns. So in the second row you have:

“advert content”

That’s two columns. The first row should be your header:

“header”

but you only filled one column. You need to fill both with header:

“header header”

So both the header and footer should fill two columns in the media query.

1 Like