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

Posted by Michael Paccione
Michael Paccione
9,017 Points

Stage 13 Media Queries Challenge Part 2

Bummer! Did you float logo left?

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

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

In the browser the logo has floated left... I don't know what is wrong.

1 Answer

Philip G
Philip G
14,601 Points

This should work:

@media (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .extra {
    display: block;
  }
}

First, you forgot the ending curly brace of the @media rule. And second, the .extra class should be displayed as a block.

Michael Paccione
Michael Paccione
9,017 Points

Okay I added your code and it worked. So firstly, thank you I appreciate your help.

However I still don't quit understand why mine didn't work.

You say I forgot the ending curly brace for @media rule. I put it at the end of all of the entire query. block; } } - hence 2 curly brackets. Is this not appropriate?

Also I thought I entered the display block like so... .extra { width: 23.404255319149%; display: block; } }.

I'm having a hard time distinguishing how my code is effectively different. The only possible I can see is that I have width defined in my brackets aswell for .main and .extra.

Philip G
Philip G
14,601 Points

I don't really understand :( Can you please give me an example? Why are you adding 2 curly braces?

Michael Paccione
Michael Paccione
9,017 Points

the first closes the .extra and the second closes the @media. I added markup to the original post, which has two curly } at the end.

Philip G
Philip G
14,601 Points

Yes, it's valid, works and it's saving lines of code... You should use it! :)