I just started embarking on HTML & CSS Challenge! Really I am excited with the way I am grabbing it.
But along the way, I was held down with this challenge on Media Query!
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.
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 create space to make it readable */
.item1 {
background: LightSkyBlue;
grid-area: header;
}
/* I create space to make it readable */
/* I create space to make it readable */
.item2 {
background: LightSalmon;
grid-area: advert;
}
/* I create space to make it readable */
/* I create space to make it readable */
.item3 {
background: PaleTurquoise;
grid-area: content;
}
/* I create space to make it readable */
/* I create space to make it readable */
.item4 {
background: lightpink;
grid-area: footer;
}
/* I create space to make it readable */
/* I create space to make it readable */
.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";
}
/* I create space to make it readable */
/* I create space to make it readable */
@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";
}
}
/* I create space to make it readable */
/* I create space to make it readable */
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-areas:
"header header"
"advert content"
"footer footer"
/* change the code above this line */
}
}
/* I create space to make it readable */
/* I create space to make it readable */
header
advert
content
footer
Please I need help so resolve this challenge and move forward. Thanks.
Can you put 3 backticks before and after your code so that it is readable, please?
Your code is correct except for the extra header, advert, content, footer you have at the end.
.container {
/* change the code below this line */
grid-template-areas:
"header header"
"advert content"
"footer footer";
/* change the code above this line */
}
