Use Media Queries to Create Responsive Layouts . need help for this , can anyone?

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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

2

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.

you need to change the grid-template-areas property to match the layout described.

3

Hey @shilpa2901,
You will need to understand css grids.
I will try to give you an introduction.
Think of your page as a table with 2 columns and 3 rows as follows:

1 2
3 4
5 6
As of now, cell 1 is occupied by "advert" and cell 2 is occupied by "header". What challenge wants you to do is make header occupy both cells 1 and 2 and footer to occupy cell 5 and cell 6. With this hint, try solving now.
1 Like
4

thanks for help , let me try .

5

i passed it , thanks for help

6

Glad i could help.
All the best.