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
Paul Thornton
5,381 Pointspart 1/3 of the code challenge for content defined break points in responsive design badge of the Build a Responsive Website section
I've been struggling with part 1/3 of the code challenge for content defined break points.
Write 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.
At the bottom of the CSS file I've added:
@media(screen) and (max-width:705) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6{
Width: 100%;
} }
It does not pass and I've tried a few variations. Please help!
8 Answers
Art Marin
Courses Plus Student 4,466 Pointstake of () on screen and add px to max-width :)
Art Marin
Courses Plus Student 4,466 Points*off
Allison Grayce Marshall
Treehouse Guest TeacherHi Paul!
Art is right :) You're on the right track and targeting the right classes. Everything is correct within the media query, but look at how you're writing the actual media query itself. It should look like this:
@media screen and (max-width : 705px) {
}
Good luck!
Allison
James Barnett
39,199 PointsYou can read more about the syntax of media queries over at Sitepoint
The form of a media query is:
@media $_MEDIA_TYPE $_OPERATOR ($_FEATURE: $_ATTRIBUTE) {
/* CSS Rules go here */
}
Where:
-
$_MEDIA_TYPE =
all,screen,projector,printetc -
$_OPERATOR =
not,and, andonly -
$_FEATURE =
device-width,max-width,min-resolution,min-device-pixel-ratio,orientation, etc
Matthew Willmott
9,426 PointsSorry to bring "bump" this thread. I'm just going through a few badges tonight of stuff I can already do but thought I might learn something I didn't know.
On part 2 of this, so directly after the task Paul was stuck on, it asks you to "Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear."
Someone tell me what code it will accept as what I've tried doesn't pass but is what works on a live site so clearly what I'm putting isn't exactly what it wants!
Code challenge: http://teamtreehouse.com/library/content-defined-breakpoints
James Barnett
39,199 Points@Matthew - As a general rule on forums, if you are asking about a different issue, rather then "hijacking" a thread, please start your own.
However, that very issue was just covered in another thread, however because this forum lacks the ability to search, it would be kinda hard to find.
Matthew Willmott
9,426 Points@James, I would have thought flooding the forums with more posts, especially without the ability to search, would make things worse? The only reason I posted here is because it was the very next question in the same code challenge.
Anyways, thanks for that link. It was the same as the code I was using but it must have been mega picky about tabs or something. Oh well. Thanks again.
Sam Casey
4,585 Pointsthe thing holding me back was a comma after .grid_6. It took me a while to get that.