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
robert spica
2,393 Pointswhat am I missing in this code challenge any help
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.
/* Tablets to Desktop */
@media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
}
.extra {
display: block;
width: 23.404255319149%;
}
}
I can not get past the an error message the states 'did you float '.logo' left? I thought I was, any help would be appreciated.
6 Answers
Gerard Willis
2,860 PointsThis is exactly what is happing to me at the moment did you float ‘logo left? I’ve had these code challenge glitches before. But after a couple of days it cleared up and my answers were accepted as right.
This one Tablet to Desktops has become a pain in the butt; I’ve been trying to finish this challenge for over a week now. I tried copping and pasting it, typing it in a line at a time but still no luck.
I’ve tried different browsers, Firefox, Chrome, Safari but still no luck. I’ve even tried it at different days refreshing the browsers every time. At first I thought it was me making mistakes, so I copied the CodePen code but still no luck. Surly this problem has been highlighted by so many and yet this glitch has not been rectified.
Liz Karaffa
17,576 PointsI didn't have "only" after @media and I indented everything inside the media queries. Don't know if that helps.
robert spica
2,393 PointsHey Liz,
Thanks for the response. Turns out that I did not close the previous media query (/* Phones to Tablets */) that sets conditions for a screen size of 481px or larger.
So maddening... guess I needed to include the full css for this challenge.
Thanks again for the help
Liz Karaffa
17,576 PointsI can't tell you how many times that has happened to me! I've found that normally when I get an error that doesn't make any sense, or it tells me that a previous task is no longer passing it's a syntax error.
robert spica
2,393 PointsThanks Liz!
robert spica
2,393 PointsHey Gerard,
I did the same sequence; re-typed everything copied and pasted all of the above. It took me a couple of days to realize that it had nothing to do with the selection of code that was not functioning properly (the part I included in my initial post).
It turned out to be a small syntax error in the code from the preceding media query that was carried over from the previous challenge. If I remember correctly I did not close the preceding media query (/* Phones to Tablets */) that sets conditions for a screen size of 481px or larger. I think I was missing the closing curly brace even though the previous code challenge had passed it was never picked up and flagged in the challenge module.
Having an error that doesn't make any sense, or it tells you that a previous task is no longer passing may be a syntax error.
I hope this help ease the pain, this can be so maddening!
Liz Karaffa
17,576 PointsI've noticed with a few challenges that if you have a syntax error earlier in the challenge, even after you correct it, the fix doesn't always take. My guess is that it might have to do with caching on the browser. I've found that if I reload the page and start from scratch, then my answer will go through. Hope this helps!