Tell us what’s happening:
I’m supposed to do the following in this FreeCodeCamp lesson:
“When the viewport is 400px or more, container class should have a grid-template-columns 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.”
Please give me a FEW jumping off points. I don’t know what I’m doing and reading about something I don’t understand isn’t helping clarify it. It’s like explaining something in German by using German to explain it. Any help would be great, please use plain English to help guide me to the right answer. I know where the code is supposed to go because it tells me that but I really don’t know if I need more or what should go there. I don’t have anything because I’m so lost.
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 (max-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto 1fr;
gird-teamplate-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 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts/