Responsive Layouts:Media Queries in css grid

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">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.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

It seems you haven’t tried the test else explain your doubt on this topic

i tried it by giving min of 400 px but it does not work

the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.

The items between " " is a single row , consider there are three rows and two columns

"col col"
"col col"
"col col"

Instruction says you it wants the first row to occupy by the header and the bottom row to occupy by the footer and in the middle it needs advert and content.

Now split and fill it based on the cols, you will find the solution
Note: Consider header, advert, content and footer as col

1 Like

You should change the 400px area following the instruction, like this:

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

Hope this solve your problem.
Good Luck!