Tell us what’s happening:
Hey coders! I’m hoping to get some help with responsive layout. I’m usually able to work through these projects but I can’t seem to get this one right. Here are my instructions:
“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 know the previous lessons go over some techniques for doing that, but I’m still a bit confused on this one. Any help would be great, thank you!
Okk, the code here currently says, when width of the viewport is atleast 400px, apply the following properties.
Now, the container class here states that the area on the page is divided into six parts, 3 rows and 2 columns respectively.
Currently, the header and footer occupy only the right side part, because there is ‘advert’ on the left side, you have to make the header and footer to occupy the whole row.
The error message might give you some help too:
// running test
When the viewport is 400px or more,
container class should have a grid-template-areas property in which,
the footer and header areas occupy the top and bottom rows respectively,
and advert and content occupy the left and right columns of the middle row.
// tests completed
Not sure what you are talking about. If you have a specific question about this challenge. You should post a new topic and show us what code you have attempted for this challenge. You can click on the Ask for Help button on the challenge and it will auto-populate the code you have tried. Then we can attempt to guide you to the solution.
FYI - If you read the thread I mentioned above, you will see the solution is there.