Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Grid Layout Going Further with Grid Layout Adjust the Grid with Media Queries

Brian Besler
Brian Besler
11,493 Points
Posted by Brian Besler
Brian Besler
11,493 Points

Problem with the activity of adding nav and the 3rd column.

For some reason i can get the look to be right when doing exactly what Guil does when adding the third column and putting in nav but cannot get the actual color or the name of the element to appear for the nav on the left side--the size is right--the look is just white though for that element...I have tried re naming it something else, adding different element etc. Get same result. Anyone else have this problem?

M Glasser
M Glasser
10,868 Points
M Glasser
M Glasser
10,868 Points

Maybe try posting your code here so we can try and see where you've gone wrong?

Kameron Johnson
Kameron Johnson
11,932 Points

Doesn't work for me either. Basically the nav doesn't want to span down to the 3rd row for the 992px media query even though it is properly labeled in grid-template-areas: 

@media (min-width: 992px) {
  .container {
    grid-template-areas: 
      "header header header"
      "nav main aside";
      "nav footer footer";
  }
}

Leaves a blank white space bottom left. However, "footer footer footer" will spread across the third row.

Dora Tokai
Dora Tokai
16,003 Points
Dora Tokai
Dora Tokai
16,003 Points

Hi,

Kameron Johnson's code is not working because of the unnecessary semicolon after "nav main aside". I don't know the solution to Brian Besler's problem, sorry.

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

If you look at page.css in the workspace, Guil has added some background colours for specific elements, one of which is the nav element. Any other direct children will have a white background:

page.css 
.container > * {
  color: #fff;
}

nav {
  background-color: #fbaea8;
}

Make sure in your index.html you added the following:

index.html 
    <div class="container">
      <header>Header</header>
      <nav>Nav</nav>
      <main>Main</main>
      <aside>Aside</aside>
      <footer>Footer</footer>
    </div>

Where this is the new line added (it's important that it has at least some content/text):

      <nav>Nav</nav>
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

I had the same issue but forgot to assign the nav area css (at the beginning) in grid.css. Simple blunder but might be helpful for somebody else…

nav {
  grid-area: nav;
}
Erik Biebinger
Erik Biebinger
7,299 Points
Erik Biebinger
Erik Biebinger
7,299 Points

A had this missing too. So I assign the nav area like you did and it worked with the last media query. But I wonder, why the 2nd media query was working for me, tho I havend added the nav { into my css before.

I mean: When

nav {
  grid-area: nav;
}

is commented out, everything works but the last media query. Only with this added into the CSS all media queries work.

I am just curious, why this is the case.

Jeremy Anderson
Jeremy Anderson
20,005 Points
Jeremy Anderson
Jeremy Anderson
20,005 Points

I know this comment is old, but I just wanted to say thanks! It just solved my problem, almost five years later, haha.