Lesson not loading correctly

HTML-CSS
1

Tell us what’s happening:

Good afternoon, I wondered if someone could help me. I’ve tried looking this up but haven’t had any success so far. I’m trying to respond to this challange about the media queries and the grid-areas.

Here is the challange i’m having an issue with.

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

Below is the code that actually had already been filled out for me, if you look at the “@Media (mid-width 400px) .container” you’ll see that it’s filled out in this manner.

@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>

I’m not quite sure what the instructions are trying to tell me to do. If someone would be willing to help me out with this I would appreciate it, thank you.

Sincerely,

Mark Scott Benson

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

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

The above refers to how the grid columns should layout with the viewport width is 400px or more. When the viewport is 300px or greater the following media query controls the grid. since 400px is greater than 300px, it will look the same until you change the 2nd media query.

  @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";
    }
  }

Above defines a grid with two columns and three rows. You will notice when the viewport is greater than 300px, that the advert column takes up the entire height of the grid. That is because in the grid-template-areas property above, “advert” is located in the left column in all three rows. You will also notice that the right column has three different parts “header”, “content”, and “footer” which corresponds to the three rows.

What the challenge wants you to do for viewport widths of 400px or greater, is have the “header” take up both columns of the first row, then on the second row, “advert” should be in the left column and “content” be in the right column. Finally, “footer” should take up both columns of the third row.

4