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
Adrian Novak
Courses Plus Student 22,581 PointsCode Challenge: Adaptive Layouts with Media Queries (Task 2)
For the Adaptive Layouts with Media Queries code challenge task 2:
"Under "Tablets to Desktop," create a new media query that floats ".logo" left and ".main-nav" right if the viewport is 769px or wider. Then, add all other "Tablets to Desktop" rules inside the media query. Finally, create a new property inside the ".extra" rule that displays it as a block element."
I don't know if I am missing something or if there is a bug. I get the "Bummer! Did you float '.logo' left?".
Here is what I have:
/* Tablets to Desktop */
@media only screen and (min-width: 796px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
}
.extra {
width: 23.404255319149%;
display: block;
}
}
Thanks!
7 Answers
Guil Hernandez
Treehouse TeacherHey Adrian Novak,
Everything looks good. But I noticed that you have min-width: 796px defined instead of 769px.
I'll look into why the wrong hint is displaying. Thanks!
Adrian Novak
Courses Plus Student 22,581 PointsI had a feeling that it had something to do with a mistype. I've been staring at it too long. Thank you for the quick response!
Evans B. Ofori
Courses Plus Student 13,720 PointsRecheck the ” .extra” class, the question says “create a new property inside the ".extra" rule that displays it as a block element." And I don’t know why you put the width there.
Kate Perris
10,422 PointsI can't get this to pass either and getting the same hint. I have:
@media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
}
.extra {
display: block;
width: 23.404255319149%;
}
}
Evans B. Ofori
Courses Plus Student 13,720 PointsHi Kate
Oops! Sorry, I was wrong with my first comment on Adrian Novak post.
I went to retake the code challenge using copy and paste your code. It passed without problem. What I would say is recheck the code above “Phones to Tablets media query” you might delete the closing bracket without knowing it or something else.
hope it helps!
Kate Perris
10,422 PointsThanks Evans! I tried again since you said it passed for you and I got through the exercise (and badge!) successfully in the end. Cheers for your help.
Henri Viiralt
9,092 PointsHi,
I have the exact same problem. Strangely enough, floating worked fine in the last exercise. This is doing my head in, been trying everything for the past 30min. Running on Chrome, code below.
/* Tablets to Desktop */
@media only screen and (min-width: 769px) {
.main {
width: 40.425531914894%;
}
.extra {
width: 23.404255319149%;
display: block;
}
.logo {
float: left;
}
.main-nav {
float: right;
}
}
Nathan Bentley
12,680 PointsI have fallen into the same trap too. I cant work out where I have gone wrong. I dont to copy your above answer to proceed unless i know why my version dont work. Something is wrong with the logo I am told.... can anyone help me? thanks
@media only screen and (min-width: 769px) {
.logo { float: left;} .main-nav {float: right;} .main { width: 40.425531914894%;}
.extra {width: 23.404255319149%; display: block;}
}
Henri Viiralt
9,092 PointsWhat worked for me was to add a "}" to the end of /* Phones to Tablets */, guess I must have forgotten to add it during the last exercise.
Nathan Bentley
12,680 PointsThanks, but this is still not working. I have checked that.
Nathan Bentley
12,680 PointsI have fixed this. In my case, I had to delete the 'old' copy already presented in the code challenge as this is copied into the new media query.
Danny Sauter
3,992 PointsHaving this same issue...and nothing is really working. Seems like a number of people are having the problem. No matter what, the error message is still
"Did you float '.logo' left?"
Any progress on this?
Thanks!
Guil Hernandez
Treehouse TeacherHi Danny Sauter,
Sorry to hear you're having problems with the code challenge. Can you please post the code you used? I apologize if it's a bit confusing––i'm looking into rewording it as we speak. :)
Thanks!
Danny Sauter
3,992 PointsGuil,
Thanks for the quick response! Excited to get this figured out :)
Here's what I've got down for the "tablets to desktop" section. Again, spits out "did you float .logo right?"
/* Tablets to Desktop */
@media screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
}
.extra {
width: 23.404255319149%;
display: block;
}
Danny Sauter
3,992 PointsAh, my bad on the formatting, but hope you catch something. Thanks!
Guil Hernandez
Treehouse TeacherIt looks like everything is correct. The only thing missing is the media query's closing }.
Hope this helps.
Danny Sauter
3,992 PointsGuil Hernandez Thanks for your help. I think it was actually getting hung up on the fact that I didn't close the media query on the section above ("phones to tablets"). It didn't return an error on Task 1 for that, but it rejected it on Task 2. Anyways, all good now for me. Thanks!