freeCodeCamp Challenge Guide: Use Media Queries to Create Responsive Layouts

Guide
1

Use Media Queries to Create Responsive Layouts

Relevant Links

Hints

Hint 1

Let’s look at parts that are already completed.
When the display window is 300px or more, this media query is the one that apply:

  @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";
    }
  }

In this case we have two columns and three rows, and the areas are set so that the advert occupy the whole left column, the header the top right part, the content the middle right part and the footer the bottom right part.

Hint 2

The challenge asks us to change the way the page looks when the display screen is 400px wide or more, so the code we need to change is this one:

@media (min-width: 400px){
    .container{
      grid-template-areas:
      /* Only change code below this line */
        "advert header"
        "advert content"
        "advert footer";
      /* Only change code above this line */
    }
  }

This is the starting code, and right now the grid-template-areas rule has the same value as above, it needs to be changed so that the header would occupy the whole first row, and the footer the whole last row.

Solutions

Solution 1 (Click to Show/Hide) 
<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 header"
        "advert content"
        "footer 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>

Code Explanation

  • "header header" defines the first row as having both columns occupied by the grid-area "header"
  • "advert content" defines the second row as having the first column occupied by the grid-area "advert", and the second column occupied by the grid-area "content"
  • "footer footer" defines the third row as having both columns occupied by the grid-area "footer"
40 Likes