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
Brandon Banks
6,141 PointsWrite a media query at 705px where the layout begins to break, that forces grid_1 through grid_6 to span 100% width of the container.
What am I doing wrong?
@media screen and (max-width:705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, { width: 100%; } }
Thanks, B. Banks
22 Answers
James Barnett
39,199 Points@Brandon -
You have a comma after the last list item, you need to remove it. In CSS just as in English, you don't need a comma after the last item in a list.
Anthony Mayfield
6,053 PointsI had to move mine to the bottom of the page to make it work.
Brandon Banks
6,141 Points@ J. Barnett,
Thanks for the lightening response.
James Barnett
39,199 Points@Brandon - You're quite welcome. Let us know here in this thread if you have any more questions about media queries.
Rocco Tozzi
1,468 Pointshow am i still wrong here?
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 {width: 100%} }
Arvelle Whitaker
7,452 Pointssyntax is really throwing me off with these challenges lol. Just that one little thing breaks the code. Ill get it eventually.
Arvelle Whitaker
7,452 PointsI struggled with this one too. Your code looks right. make sure there are no semi colons at the end of "px" or "%" make sure things are indented correctly too.
Troy Hlavaty
2,809 Pointsyeah i have the exact same code as you and it won't work and I cannot seem to find out why
Robby White
11,369 PointsI have this and can't get it to work as well:
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }
Troy Hlavaty
2,809 PointsI changed the location of mine to the bottom of the page and then it worked
Robert Brown
12,269 PointsThis worked for me. They need to label where they want the code so the test work and you don't go craze when the code is right just not where they want it
Nicholas Blomquist
1,877 Pointsget rid of this at the top of the page .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 and then insert this code at the very bottom of the page and walla!! @media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }
Micha Kaufman
2,433 Pointsnone of the above work for me, what should i do?
Nick Eli
1,615 PointsMicha Kaufman , compare your code to mine. It should look like this:
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }
Most people usually mess up the media query identifier. I am pretty sure that is where your mistake is. Good Luck!
Tech Solutions
6,077 Pointsmy code was literally identical to yours but wouldn't pass, I pasted in yours and it passed, I checked very carefully and there were no syntax errors in mine
Ben Cole
1,189 Pointssame problem I copy and paste the CSS and still I must recheck my work where is the exact location?
@media screen and (max-width:705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }
Brian Pelowski
7,202 PointsI am having the same problem and cannot figure it out? I get the error: "Bummer! Be sure to set the media query at 705px."
Ok, got it. I removed to much of the code in the middle of the body...
Ben Cole
1,189 Pointsstill got the problem of where in the code I should put this.
Ben Cole
1,189 PointsI have tried all advice given but still no change
Ben Cole
1,189 PointsThis is the error I get Did you set the width for grid_1 through grid_6 to 100%?
I have checked the text over and over I have copied and pasted the correct answer into every line of the code and still nothing
Ben Cole
1,189 PointsLets address the Giant Elephant in the room there is a second sheet called style.css but it is well nearly impossible to see. put this code;-
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100% } }
right at the bottom.
It would seem everyone has assumed that everyone knew this and not bothered to mention it.
Omh MG
19,233 PointsYou're right on the money. Thanks for the help.
Ben Cole
1,189 Pointseverything is easy if you know how to do it. You can watch the same video 100 times and not get the one piece of information you need.
Jakob Herrmann
4,962 PointsIn the "Implementing Media Queries" video (https://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/implementing-media-queries) at 1:44 Allison Grayce says: "... head to the very bottom of the stylesheet, where we should always write our media queries"
That said make sure that you write your @media screen and (max-width: 705px) { } query at the bottom of the CSS file.
Kingsley Nudo
5,402 PointsExactly so. You need to write the following code at the bottom of the style.css sheet:
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100% } }
Diego Lucero
10,588 PointsDon't forget your semicolons to end each property! It signifies the end of a line to the computer/server. it should look like this:
```css
@media screen and (max-width: 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
}
Joy Ahmed
Courses Plus Student 9,687 PointsYou don't have to do nothing but put the code as it should be:
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }
I tried several things but nothing worked and I noticed that there is an underline showing error under max-width property. Refreshed the page and the same code worked.