Use-media-queries-to-create-responsive-layouts

HTML-CSS
1

Tell us what’s happening:

I don’t really understand how to complete this challenge. I’ve tried a variety of solutions and nothing seems to work. I’m using beta.freecodecamp so when I try to get a hint it takes me to a 404 page and I can’t find anyone else having submitted a problem with this challenge so I’m really stuck.

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-columns: 50px;
      grid-template-rows: auto 1fr auto;
      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/64.0.3282.186 Safari/537.36.

Link to the challenge:

3

Got it! Thanks so much for pointing that out, I was really confused on what I was supposed to do.

Ended up with the following as my solution :

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
“header header”
“advert content”
“footer footer”;

/* change the code above this line */
4 Likes
5

@media (min-width: 400px){
.container{
/* change the code below this line */

  grid-template-areas:
    "header header"
    "advert content"
    "footer footer";

/* change the code above this line */
}

}

Hope this will solve your problem.

7 Likes
6

That sounds so simple. The question is: Why these sentences do not change their colors? you are used as “RED” colors and they don’t change “but works”?

7

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
“header header”
“advert content”
“footer footer”;

/* change the code above this line */
}

}

8

Took me a while to figure out this problem but I have a solution to this. When i figures it out I was so mad because It took me a couple hours. Here it is ; take a look at the quotes (") vs (”).
This is correct.

grid-template-areas:
“header header”
“advert content”
“footer footer”;

This is wrong.
grid-template-areas:
“header header”
“advert content”
“footer footer”;

Such a small difference but It worked.

1 Like
10

I was hesitating at first, but it let me pass the test. In my case, I erased the entire 300px media quiery, and copy paste those grid-template-columns and rows to the 400px, also replacing the advert to header and footer.

from this:

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

to this:

@media (min-width: 400px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
“header header”
“advert content”
“footer footer”;
}
}

the end result was a bit messy, since the header and footer didnt occupy the top and bottom

11

You dont have to use grid-template-rows/columns here, it works without them.

2 Likes