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

CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

marsha spell
PLUS
marsha spell
Courses Plus Student 5,555 Points
Posted by marsha spell
marsha spell
Courses Plus Student 5,555 Points

help plzz

Challenge task 2 of 3 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.

here is my code: i feel like it should be right

@media only screen and (min-width: 769px) {
 .logo { float: left; } 
.main-nav { float: right; }
 .main { width: 40.425531914894%; }
 .extra { display: block; width: 23.404255319149%; }

thanks a lot!!

3 Answers

Brandon Kern
Brandon Kern
8,433 Points

If that doesn't help, here is the code I did. I went back to see if it would be acceptable for your exercise and it marked it as correct.

@media screen and (min-width: 769px) {
    .logo {
    float: left; 
  }
  .main-nav {
    float: right; 
  }
  .extra {
    display: block;
  }
}
Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

do you have a closing curly brace for your media query?

Brandon Kern
Brandon Kern
8,433 Points

Andrew is talking about the curly bracket at the very end of your media query. It is missing from the code in your post which means that, at least in the post, the media query is still open and will be marked wrong. Add a } to the end of your code to close the media query and see if that helps.

Also, the .main class doesn't need to be in the media query and you don't need a width on the .extra class because it should be inherited by the rules already defined in the pre-coded css in the /* Tablets to Desktops */ section.