Use Media Queries to Create Responsive Layouts

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: 400px){
    .container{
      grid-template-columns: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-columns:1fr;
      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; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0.

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

1 Like
2

Huh, this took a toll on me.
I am also pretty new to CSS-Grid and haven’t started the challenges but trying many variation finally solved this challenge.

Let me clearly explain, so others can benefit from this.

Problem

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.

  1. Header and footer should occupy full width.
  2. Advert & Content to occupy equal space.

This is how you need to spread the grid-area.

Grid-Area_Rows-columns
Grid-Area_Rows-columns880×622 13.1 KB

Hint:
Add grid-template-columns: auto;
Update the code for grid-template-areas to pass the test.

Spoiler Alert: (don’t click this unless you have tried and failed)

{
grid-template-columns: auto;
grid-template-areas:
“header header”
“advert content”
“footer footer”;
}

7 Likes
3

Thanks! Came close but for some reason I couldn’t come up with the template areas on my own

4

I was on this for two hours thank you for the help.

6

I finally completed it.

7

Dear Randore,

Thank you for this post. It helped me a lot :). I didn’t understand what the directions were trying to tell me, and I noticed that the code had already been filled out for me, so I didn’t understand what I needed to add, or change. Please excuse and ignore my original question to the forum, thank you.

Sincerely,

Mark Scott Benson

8

i was typing
“header”
“advert content”
“footer”
that’s the problem here and i got frustrated trying different variations and stuff.
thanks a lot.

9

Same

  @media (min-width: 400px){
    .container{
      /* change the code below this line */
      grid-template-column: auto;
      grid-template-row: auto 1fr auto;
      grid-template-areas:
        "header"
        "advert content"
        "footer";
    
    /* change the code above this line */
    }
  }