Help me to solve this challenge

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 header"
        "content content"
        "advert footer 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; WOW64) 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

1 Like
2

Hey @yogeshwar, tell me what is happening to your code
what are your difficulties

3

at @media (min -width : 400px)

dont know to what change

4

"advert header header"

This is a row and each elements ( advert, header, footer, content ) are columns. ( Note: There should be only two columns for each row, but you currently have three columns, so remove one column )

If a row completely needs to occupy by any element, then all the columns ( 2 columns ) in the row must be filled with same element.

5

can u please show me code

6

If you need the answer, i can provide you directly, but it would be nice if you try your maximum before i would show the solution.

Give it a try,


col col
col col
col col

This must be the structure, for an element to occupy the top, you should fill the top two col with the same element Ex: header should occupy top, so fill both cells with header at the top

I gave you a hint try solving it.

1 Like
8

I tried a lot . I am unable to find solution please help me to solve this challenge.

9

Post your code of what you have tried, so we could help from that.

10

@media (min-width: 400px){
.container{
/* change the code below this line */

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

/* change the code above this line */
}
11

You are almost there :slight_smile:
First of all,

  1. Just switch the top and bottom row
  1. Then look out the instructions, it says,
    advert and content occupy the left and right columns of the middle row.
    You currently have content occupying the middle row completely, just change the first cell in middle row
1 Like
12

thank you @Sujith3021 it was my last challenge in front end , i got stuck here for 10 to 15 minutes . Once again thank u.

1 Like