Use Media Queries to Create Responsive Layouts - help!

Use Media Queries to Create Responsive Layouts - help!
0

#1

Tell us what’s happening:
I’m supposed to do the following in this FreeCodeCamp lesson:
“When the viewport is 400px or more, container class should have a grid-template-columns 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.”

Please give me a FEW jumping off points. I don’t know what I’m doing and reading about something I don’t understand isn’t helping clarify it. It’s like explaining something in German by using German to explain it. Any help would be great, please use plain English to help guide me to the right answer. I know where the code is supposed to go because it tells me that but I really don’t know if I need more or what should go there. I don’t have anything because I’m so lost.

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 (max-width: 400px){
    .container{
      /* change the code below this line */
     grid-template-columns: auto 1fr;
     gird-teamplate-rows: auto 1fr 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 (Macintosh; Intel Mac OS X 10_10_5) 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/


#2

Pay attention to the in-code comments:

/* change the code below this line */

As far as I can see you changed the min-width with max-width, so you can reset your code and retry ^^

About the challenge, you should first of all get what media queries are and what css grid is.

  • Media queries are elements used to change layout based on the viewport dimensions ( and other stuff not covered by the challenge) - Link to W3School: media queries examples
  • css grid is a recent way to design layouts ( e.g. how to the graphic elements [button, input box, paragraphs, etc] dispose themselves around the screen). - Link to MDN: Grid template areas

Now you should change this css rule

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

to match the instructions provided by the challenge; feel free to ask some more specific questions if this doesn’t clarify that much^^


#3

hope this will help you

here is the code:

@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 */
}

}