Use Media Queries to Create Responsive Layouts ( help me understand what to do here)

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/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,

2 Likes
3

You should alter the code in the 400px area, 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!

1 Like
4

Hey buddy, I think it’s better to let them try some code rather giving the direct solution, anyone who solved the answer can give the solution, but the OP should understand the concept that’s the point, try giving a hint to the solution rather than a direct solution.

1 Like
5

sure, i will keep that in mind

7

Cool, thanks alot :slight_smile: