Help me to get over with this

Help me to get over with this
0

#1

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.


#2

Hey, it would be much easier to help if you put in a link to your page or codepen editor. To get the result you want just add a media query in your css file like this:
@media (min-width: 400px){
Other code here.
}
Doing this would allow you to create a grid-template-area you want for 400px and above. Hope it helps!


#3

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "header"
    "content"
    "footer";

/* change the code above this line */
}

}
I have tried this but it won’t work


#4

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "advert header"
    "advert content"
    "advert footer";

/* change the code above this line */
}

}


#5

Your project link??For more detailed solution.