I m not understanding...help to get me out

HTML-CSS
1

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 (Macintosh; Intel Mac OS X 10_13_4) 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

2

You can check this, if you don’t understand, you can ask here

3

The issue is here:

  @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 */
    }
  }

The instructions say:

When the viewport width is 400px or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.

But you are telling it:

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

telling it that the top row should be “advert” and “header”, when it should just be “header” (remember to put it twice as it is two columns) and the same problem with the footer.

4

i did every thing , tell me the code what should i do to pass this test

5

Each line is a row.

You need to only have one type content in the top or bottom row.

6

plz give me the code i did in ur way but i still get hang on this …

7

Each word - advert, header, content, footer acts as a cell, and as @Tirjasdyn said each line is a row,
so that makes
row -> advert header
row -> advert content
row -> advert footer
Each element is a cell, and for a row to be occupied by a cell, both the cells of a row must have the same name i.e., advert, header, footer or content,
If you don’t get this, you will be given the code

8

ok i understand this but so header is in top and footer is in bottom whereas advert and content in middle so what can i do to pass this test

9

everything is in text …so what should i do to pass this test.

10

Exactly, if header is at the top, it means the two cells at the top should have the same name and similarly do the same to the bottom row

11

That’s what we’re telling you. Do this to pass the test.

12

no give me code what should i edit to pass this test i m understanding the meaning of the text but everything is in text and again its wanting to edit …so what i do:?

13

Well, if we give you the code and you don’t understand what we’re saying, then how are you going to do the next one?

How about you try the things we told you to try, and post your modified code, then we can walk you through it step by step.

14

ok u r saying right but i m understanding the question ok .but problem is that its saying top bottom and middle portion …there is already present in viewport 400 container . i think there is no need to edit because there is same thing which the question require

15

The qn says top should be occupied by header, but you have advert and header at the top, think what to change so that the top has only header,
Note: You should have only two cells for each row

16

What happens when you hit Run the tests?

17

Post the updated code that you are trying.

18

i changed the adver to top in header and bottom in footer then the middle portion is adver and content what

19

Can you post that code

20

“advert header” i changed to " top header"
“advert footer” . “bottom footer”