Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

code quiz problem

Hi i am trying to pass this quiz and it is telling that i need to float the logo to the left but i did and cant let me pass it can someone revise my code maybe i am missing something 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; } }

6 Answers

Erik McClintock
Erik McClintock
45,783 Points

Saul,

When I copy and paste your code into the code challenge, it passes. Everything looks good.

Erik

Erik McClintock
Erik McClintock
45,783 Points

What error are you seeing?

this is the code quiz questions 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.

this is my code

/* Tablets to Desktop */ @media only screen and (min-width: 769px) { .logo { float: left; } .main-nav { float: right;

.main { width: 40.425531914894%; v} .extra { width: 23.404255319149%; display:block; }

}

this is the code quiz questions 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.

this is my code

/* Tablets to Desktop */ @media only screen and (min-width: 769px) { .logo { float: left; } .main-nav { float: right;

.main { width: 40.425531914894%; v} .extra { width: 23.404255319149%; display:block; }

}

Erik McClintock
Erik McClintock
45,783 Points

If that code is exactly what you have in your code challenge (i.e. copied and pasted), then it looks like you're missing a closing curly brace after your .main-nav section and there's a "v" sitting at the end of your .main section just before the closing brace. Try adding that closing curly brace for the .main-nav section and deleting the "v" character from the .main section and see if it works!

Otherwise, I don't see anything wrong with the code that you have there. If the above isn't the solution, perhaps something else was accidentally moved or deleted in the other pieces of code?

Erik

Hi thanks for your help i did enter the code and check and nothing i get the error that if i float the logo to the left.

this my code

@media only screen and (min-width: 769px) { .logo { float: left; } .main-nav { float: right; }

.main {
  width: 40.425531914894%;
}
.extra {
  width: 23.404255319149%;
  display: block;
}

}