Help needed regarding Using Media Queries to Create Responsive Layouts

HTML-CSS
1

Tell us what’s happening:

ive tried my best to make the advert only take up the left side of the middle section by following the explanation. The video does not play and the hint does not have an answer .
I need to learn this for work so answers will be much appreciated !

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36.

Challenge: Use Media Queries to Create Responsive Layouts

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

2

Hello there.

The important section is here:

grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;

Notice how there are two columns, and three rows. With what you have, you are defining three rows, but only one column in the first and last row.

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

You need to define all of the columns.

I hope this helps.

1 Like