Need help with css grid use media queries to create responsive layouts

I am stuck on my 2nd to last question in the css grid challenges titled below. I have tried to find hints for how to do this there isn’t one and there also isn’t a video any example or help with this problem greatly appreciated.

## CSS Grid: Use Media Queries to Create Responsive Layouts

CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.

In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.

***this is the challenge below ***

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.

I assume you mean this challenge (feel free to correct me):
https://learn.freecodecamp.org/responsive-web-design/css-grid/create-grids-within-grids

So the purpose of the challenge is to create a grid within a grid. The challenge already says you have to use two properties for item3:

  • Display
  • Grid-template-columns

Now how do you want to display item3?
Well, by creating a grid (that is the purpose of the challenge).

How do you want to set the properties of grid-template-columns?
It is said in the challenge , auto & 1fr.

Hint: Check .container. Perhaps you can spot it there.

Good luck! :slight_smile:

no this is not the one it is titled:

CSS Grid: Use Media Queries to Create Responsive Layouts

It the second to the last question in the css grids challenges above responsive web design projects. sorry it will not allow me to post link.

I appreciate you help btw!

Ah! My bad!

So there are only 2 things you need to change in the grid-template-areas:

  • header
  • footer

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

I highly encourage you to check out this post:
Use-media-queries-to-create-responsive-layouts . I had a similar issue with this challenge, but this post helped me to do the challenge.

wow, I over complicated this thank you for helping!

No problem :slight_smile:

check this out: https://gridbyexample.com/video/

the cleanest description of css grid i’ve found on the net.

1 Like

nice resource, thanks for posting

she is spot on, like going to class. she also has some lectures on the topic if you search for her name on youtube.

definitely will do that

I want to come back to this link when I’m on my lap top.

Thanks for posting it.