Help with media queries and grids

Help with media queries and grids
0

#1

Tell us what’s happening:

I am having problems with creating a media query that will, 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.

Is their another previous lesson I need to go back and review?

Thanks

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-columns: auto auto;
      grid-template-rows: auto auto auto; 
      grid-template-areas:
        "advert header"
        "advert content"
        "advert 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts


#2

Below is the same answer I gave the other day about this challenge.

If you shrink the browser width to less than 300px, you will notice the default value for the .container’s grid-template-areas is:

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

Coupling the above with the grid-template-columns value of 1fr and grid-template-rows of 50px auto 1fr auto, this creates a single column with 4 rows with the height of each row defined as 1st row = 50px, 2nd row = auto, 3rd row = 1fr and 4th row = auto.

If you expand the browser width to 300px or greater, the first media query (seen below) changes the number of columns to 3 and number of rows to 4 with slightly different values for each. See how advert takes up the entire first column? That is because each line surrounded by " " of the grid-template-areas property represents a row and the two values represent the left and right columns respectively. Since advert appears on the left side in all three rows, that is why it displays as the entire left column. Since header, content, and footer are on separate rows, they display the same way in the right most column.

  @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 the challenge, they only expect you to change the grid-template-areas. Since grid-template-columns and grid-template-rows was already defined for browser widths 300px and greater, those same property values will be in effect for 400px or greater, so the column and row structure is exactly the same. You just need to rewrite the three lines given for the 2nd media query so header takes up the entire first row, footer takes up the entire 3rd row and advert and content split the 2nd row.


Use Media Queries to Create Responsive Layouts... What actually be the query?
#3

randelldawson,

Thanks for the help!