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

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

My code is perfect but won't pass? Help please?

Here is the question:

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:

/* Phones to Tablets */ @media only screen and (min-width: 481px) { .col { float: left; }

.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; }

/* 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%; } }

Jeff Busch
Jeff Busch
19,287 Points

Hey Fedor,

How's Mayor Ford doing?

4 Answers

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Ah ... sorry, Jeff. That went straight over my head! I think we need to petition them add a sarcasm font to the Markdown :-)

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

I nominate Comic Sans!

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

I second that!

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

Thanks for the help Jennifer!

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

Thanks for the help Jennifer!

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Fedor, do you mind if I offer some (hopefully) constructive criticism? Considering how frequently your threads/questions appear on the forums, do you even try to solve the problems once the code challenge rejects your code?

You can't be learning much if you keep going to the forums for simple fixes like this one. I think it would be really helpful if you tried solving problems on your own. I believe that I said in one of my replies to your questions that you should experiment more, to really understand what's going on in the code challenges. If there's a preview button in the code challenge, use it. See how the changes to the code interact with the formatting of the web page.

If you get an error, cover all your bases — check the curly braces, check the semi-colons, check the spelling of property names, check the selectors, etc. Try to establish a systematic troubleshooting plan, and you'll find that you won't need to visit the forum so often. :)

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Great advice, Dino!

When I was first starting out I would literally count the number of opening tags on my fingers and then systematically lower each finger as I confirmed that the tag was closed. That one step alone caught a lot of mistakes.

I still find myself doing it out of habit :-)

I agree that experimenting and having a solid understanding of what is going on in the code challenges is paramount before moving on to the next section. Even if it means repeating the same video several times until you have got it down.

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Fedor,

This is the same problem as your last forum question :-)

You forgot to close the curly brace on the first media query again.

Jeff Busch
Jeff Busch
19,287 Points

Can't be Jennifer, his code is perfect.

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Jeff,

If you look closely, he is missing a closing curly brace for the first media query.

/* Phones to Tablets */ 
@media only screen and (min-width: 481px) { 
        .col { float: left; }
    .main { width: 65.957446808511%; } 
        .secondary { width: 31.914893617021%; } 
        .secondary, .extra { margin-left: 2.127659574468%; }

// he's missing a closing curly brace here

/* 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%; }
  }
ARNAB ROY
ARNAB ROY
Courses Plus Student 5,515 Points
ARNAB ROY
ARNAB ROY
Courses Plus Student 5,515 Points

I had this code but it also show me the same error can anyone help...

/* Complete the challenge by writing CSS below */

/* Phones to Tablets */ @media screen and (min-width:481px){ .col{ float:left; } .main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; } }

/* 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; } }

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Jennifer,

I was poking fun at Fedor.

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

Mayor Ford is actually doing a fine job in Toronto. How's life under Obama? :p