Media Queries to Create Responsive Layouts

Tell us what’s happening:

Can’t apply my code for a viewport size of 400px or more, don’t un derstand what’s wrong with the code I made, the media queries says for 400px or more…

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 (min-width: 400px){
    .container{
      /* change the code below this line */
    
      grid-template-areas:
        "header"
        "advert content"
        "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 (X11; Linux x86_64) 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

Ignore my last post, I was thinking of something else.

You’ve got the idea right, but there are two vertical rows, and three horizontal. Right now you have the top row and bottom row only filling in one vertical row.

Here is the solution.

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

Thanks, I figured out with some work, I in fact, really misunderstood how it worked! =)

1 Like

This was super helpful! I completely misunderstood thinking you had to use grid-template-columns and grid-template-rows to adjust it.

1 Like