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

General Discussion

Joseph Torres
Joseph Torres
6,280 Points
Posted by Joseph Torres
Joseph Torres
6,280 Points

Issue with trying to make a CSS Grid site responsive with media queries

Can someone please tell me whats wrong with my code as it does nothing when I scale it down. Someone please help. Thank you.

HTML

<main class="grid"> <header> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Sign Up</a></li> </ul> </nav> </header> <article>Article</article> <aside>Aside</aside> <footer>Footer</footer> </main>

CSS

body { max-width: 1200px; }

nav ul { list-style-type: none; } nav li { display: inline-block; }

nav a { text-decoration: none; }

header, article, aside, footer{ background: lightblue; border: 1px solid black; border-radius: 5px; text-align: center; }

.grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-gap: 10px; grid-template-areas: "header" "article" "aside" "footer"; }

header { grid-area: header; }

article { grid-area: article; }

aside { grid-area: aside; }

footer { grid-area: footer;

}

MEDIA QUERIES

@media only screen and (max-width: 768px) { .grid { grid-template: repeat(auto-fit) / 100%; grid-template-areas: "header" "content" "sidebar" "footer" } }

5 Answers

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

What result do you want to get? I see changes on scale, but it looks weird:)

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

See again, maybe it is what you want https://thimbleprojects.org/andech/376506/ I see, that you not right using grid-template-areas.

Joseph Torres
Joseph Torres
6,280 Points
Joseph Torres
Joseph Torres
6,280 Points

Thank you sooooo much. In a nutshell what did I do wrong?

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

For big screens:

.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas:
    "header header header header" 
    "article article article aside"
    "footer footer footer footer";
}

You divide grind on 4 columns and 3 rows with same width and by grid-template-areas you create a template of how you want to position your areas. Header and footer take all 4 columns, article 3 columns and aside only 1. For mobile:

@media only screen and (max-width: 768px) {
  .grid { 
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header" 
      "article"
      "aside"
      "footer";
  }
}

You create only 1 column and all areas, of course, go from top to bottom.

Joseph Torres
Joseph Torres
6,280 Points
Joseph Torres
Joseph Torres
6,280 Points

Thank you so much, would this be a best practice from here on out???

Joseph Torres
Joseph Torres
6,280 Points
Joseph Torres
Joseph Torres
6,280 Points

Why is it taught differently in the CSS Grid coarse? He uses like 3 or 4 columns for mobile media queries?

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

Sorry, I don't uderstand, what do you mean?

Joseph Torres
Joseph Torres
6,280 Points
Joseph Torres
Joseph Torres
6,280 Points

The Team Treehouse CSS Grid coarse shown by Gil shows in the grid-areas for example "header header header header" when making a media query for a small mobile size. Just like you saw: "header" "article" "aside" "footer" in my code, its 1 column for mobile first like I thought. Hope this makes sense...

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

Oh, you may create 4 columns for mobile, it is not realy matter in this case. The main thing use right template and understand how it works.

Joseph Torres
Joseph Torres
6,280 Points
Joseph Torres
Joseph Torres
6,280 Points

Thank you so much friend.