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

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

#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:


#2

Since you still want to have two columns (one for the advert area and one for the content area), you do not want to just make a single column of 50px width (which is what the above code does). In fact, you do not need to reference the grid-template-columns or grid-template-rows properties at all in your media query, so remove those two lines. You only need to change the grid-template-areas property, so that only the header occupies both columns in the first row (top) and the footer occupies both columns in the third row (bottom).

Review the previous challenge named CSS Grid: Divide the Grid Into an Area Template an pay specific attention to the 2nd paragraph of the challenge where it explains how to merge cells together into an area for a row.


#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

You can leave these two lines out.


#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.


#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 */
}

}


Use Media Queries to Create Responsive Layouts 1
#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.


#9

My issue with this challenge stemmed from my usage of an unnecessary row in the CSS styling. I still received an error although, technically, the viewport displayed a correct result:

/* change the code below this line */

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

/* change the code above this line */

It only requires three lines rather than the four that I listed above. Only one line is necessary for “advert content”.

Do not make the same mistake I did and waste more time than you should! :wink: