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

Daetuan Snagg
3,357 PointsCode Challenge: Adaptive Layouts with Media Queries
My problem is with Task 1, "Under "Phones to Tablets," create a media query that floats the ".col" elements left if the viewport is 481px or wider. Then, add all other "Phones to Tablets" CSS rules inside the media query." This is my code:
@media only and (max-width: 481px) {
.main {
width: 65.957446808511%;
}
.secondary {
width: 31.914893617021%;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
.main,
.secondary,
.extra {
float: left;
}
}
What am I doing wrong?

Nick Pettit
Treehouse TeacherHi Daetuan Snagg,
I just tried this and I honestly wasn't able to make it pass either. Guil Hernandez should be able to help us figure it out. :)

Daetuan Snagg
3,357 PointsThanks Victor, it actually worked and i saw what the problem was ( I should have put screen, instead of only) and figured everything else out from there. Thanks so much.

Michelle Pepe
Courses Plus Student 6,125 PointsViktor, it's almost right. you can't space @ media and screeen is spelt wrong.
3 Answers

Michelle Pepe
Courses Plus Student 6,125 Points@media screen and (min-width:481px) { .col { float:left; } }

Guil Hernandez
Treehouse TeacherHi Daetuan Snagg,
You're close. Instead of the max-width
media feature, you'll need to use one that checks for a minimum width and wider.
It looks like you still need to declare a float: left
for .col
. After that, you simply need to copy and paste the 3 CSS rules under /* Phones to Tablets */
into the new media query.
Hope this helps. :)

John DeWolf
2,485 Points@media screen and (max-width: 481) { .col {float:left;} .main {width: 65.957446808511%;} .secondary {width: 31.914893617021%;} .secondary, .extra {margin-left: 2.127659574468%;} }
Hi Guil,
I believe I have all the requirements but I'm still getting the error "Did you float the '.col' divs left?" Can you give me any advice?
Thanks,
John

John DeWolf
2,485 Points@media screen and (max-width: 481){ .col { float:left;}
.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; } }
^ A little better formatting^
Also, with the way this is worded, shouldn't it be min width?
Thanks again

Aaron Uyehara
15,131 Points@media screen and (min-width: 481px) { .col {float: left;
}
.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; }
/* Tablets to Desktop */
.main { width: 40.425531914894%; } .extra { width: 23.404255319149%; } }
I had forgot the "and" once I added that it was all good. lol thanks Team Treehouse!!
Viktor Léhner
12,771 PointsViktor Léhner
12,771 PointsTry this: