Use Media Queries to Create Responsive Layouts help me i'm stuck here

Use Media Queries to Create Responsive Layouts help me i'm stuck here
0

#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;
    view-port: 400px;
    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"
        " content advert"
        "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/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

We are here for you bro…


#3

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.

#4

Advert, content header and footer are cells,

cell cell
cell cell
cell cell

You need header to occupy the top row, therefore you must have header at the top, but you should occupy both the cells at the top
Similarly for the footer, footer should occupy the bottom two cells


#5

When using grid-template-areas: like

grid-template-areas: 
"cellwidth" "cellwidth"

this is how i view them… the cell width are thought of as in lets say having width with values. so say cellwidth is 50%, which is half of the full width, then if you are looking at making it contain the entire with you will need two of the cellwidth.


#6

thanks it worded nicely explained :ok_hand:t2: