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):
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
Now how do you want to display
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 ,
.container. Perhaps you can spot it there.
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
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!
check this out: https://gridbyexample.com/video/
the cleanest description of css grid i’ve found on the net.
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.
I want to come back to this link when I’m on my lap top.
Thanks for posting it.