Use Media Query to Create Responsive Layouts

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

Hi. I’m having a problem with this one. I don’t understand what I’m supposed to do.

Hi. Thanks for your reply.

How do I use thegrid-template-areas property please? Am I supposed to use the grid-template-rows and/or grid-template-columns properties at all?

All you have to change is the grid-template-areas property.

If you shrink the browser width to less than 300px, you will notice the default value for the .container’s grid-template-areas is:

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

Coupling the above with the grid-template-columns value of 1fr and grid-template-rows of 50px auto 1fr auto, this creates a single column with 4 rows with the height of each row defined as 1st row = 50px, 2nd row = auto, 3rd row = 1fr and 4th row = auto.

If you expand the browser width to 300px or greater, the first media query (seen below) changes the number of columns to 3 and number of rows to 4 with slightly different values for each. See how advert takes up the entire first column? That is because each line surrounded by " " of the grid-template-areas property represents a row and the two values represent the left and right columns respectively. Since advert appears on the left side in all three rows, that is why it displays as the entire left column. Since header, content, and footer are on separate rows, they display the same way in the right most column.

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

In the challenge, they only expect you to change the grid-template-areas. Since grid-template-columns and grid-template-rows was already defined for browser widths 300px and greater, those same property values will be in effect for 400px or greater, so the column and row structure is exactly the same. You just need to rewrite the three lines given for the 2nd media query so header takes up the entire first row, footer takes up the entire 3rd row and advert and content split the 2nd row.

1 Like

Hi Randell.

I changed grid-template-areas.

I typed

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

That worked a treat. I have this awful tendency to over-think. The header took up the whole first row and the footer covered the whole third row.

Thanks for your help. I appreciate it.

Sean :slight_smile:

I was stuck on this one too.

I changed the media query like this:

@media (min-width: 400px){
    .container{
      grid-template-areas:
        "header"
        "advert content"
        "footer";
    }
  }

Which works in terms of the request - if I resize my browser it does as intended, but I was thinking that Advert and Content would need to be inside of two columns… as that was what the test console output said.

23

I also tried the example you gave @camperextraordinaire but that doesn’t pass the test in this example either.

I am grateful for the example you gaave @SeanFl42 as that passed as well,but I am left wondering why we had to specify ‘header head’ and ‘footer footer’ instead of my example above? Does grid-template-areas function need all two arguments if they are set up that way?

Cheers - Dan :slight_smile:

1 Like