Same height size

Tell us what’s happening:

I can not make the size of welcome page equal to the size of viewport,
please help me
.
Your code so far
https://codepen.io/Forest21/pen/ZEboOzwr


<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:
      "header header"
      "content content"
      "footer footer";
  }
}

@media (min-width: 400px){
  .container { 
/* Only change the code below this line */
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
    /* Only 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:

When you’re trying to make the height of something into the height of the viewport, you can’t just adjust it until it is the size of the viewport. If the viewport changes, that doesn’t change. That’s why in CSS, there is a unit called vh that is short of viewport height. It uses % of the viewport. So 15vh is 15% of the viewport height.

1 Like

what are you asking help for?

your question doesn’t match the challenge you have posted about