Media queries when viewport is 400px

HTML-CSS
1

how to code the below:
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

What have you tried so far? What do you don’t know? We tend to not give solutions, but to help users fix their own code and arrive to the solution on their own

3

Hey Umba,

Viewport is basically the content that is visible to the user. So the objective is to make sure the header and footer occupy the entire row when the viewport (ie preview panel) is more than or equal 400px.

4

@media (min-width: 400px){
.container{

  grid-template-columns: 1fr 1fr auto 1fr;
  grid-template-rows: 1fr 1fr auto 1fr;
  grid-template-areas:
    "advert header"
    "advert advert"
    "advert content"
    "advert footer";

}

NB: I noticed that the other .container of 300px seems overiding the code of 400px container.

5

Yes, It does override because the size of the viewport (Preview panel) is 300px. Increase the size of your preview panel. You will see the difference.

Important note.
Ex - @media(max-width:300px) . Using this media query will only reflect if the viewport is less or equal to 300px
Where as the same applies below also, but it requires a minimum width of 400px to reflect.
@media(min-width:400px).

1 Like