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
Joseph Torres
6,282 PointsIssue 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
16,529 PointsWhat result do you want to get? I see changes on scale, but it looks weird:)
Andrey Misikhin
16,529 PointsSee again, maybe it is what you want https://thimbleprojects.org/andech/376506/ I see, that you not right using grid-template-areas.
Joseph Torres
6,282 PointsThank you sooooo much. In a nutshell what did I do wrong?
Andrey Misikhin
16,529 PointsFor 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
6,282 PointsThank you so much, would this be a best practice from here on out???
Joseph Torres
6,282 PointsWhy is it taught differently in the CSS Grid coarse? He uses like 3 or 4 columns for mobile media queries?
Andrey Misikhin
16,529 PointsSorry, I don't uderstand, what do you mean?
Joseph Torres
6,282 PointsThe 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
16,529 PointsOh, 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
6,282 PointsThank you so much friend.
Joseph Torres
6,282 PointsJoseph Torres
6,282 PointsThank you for this program by the way.. https://thimbleprojects.org/jtorr14/376514