Responsive Layout help

HTML-CSS
1

Tell us what’s happening:
Hey coders! I’m hoping to get some help with responsive layout. I’m usually able to work through these projects but I can’t seem to get this one right. Here are my instructions:

“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.”

I know the previous lessons go over some techniques for doing that, but I’m still a bit confused on this one. Any help would be great, thank you!

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/67.0.3396.99 Safari/537.36.

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

2

Look in here and you’ll find out what to change in grid-template-areas:

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

Okk, the code here currently says, when width of the viewport is atleast 400px, apply the following properties.
Now, the container class here states that the area on the page is divided into six parts, 3 rows and 2 columns respectively.
Currently, the header and footer occupy only the right side part, because there is ‘advert’ on the left side, you have to make the header and footer to occupy the whole row.
The error message might give you some help too:

// running test
When the viewport is 400px or more,
container class should have a grid-template-areas property in which,
the footer and header areas occupy the top and bottom rows respectively,
and advert and content occupy the left and right columns of the middle row.
// tests completed

Hope this helps :slight_smile:

5

why not solve it, I have tried all i can,

6

You can sure show it in the code, that would be better, explaining doesnt prove anything here