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

Code Challenge: Adaptive layouts with media queries

I'm having trouble with the challenge on adaptive layouts. It's telling me that, "did you forget the float '.logo' left" but I already have the '.logo' left on the media query.

http://teamtreehouse.com/library/websites/css-foundations-second-edition/media-queries/adaptive-layouts-with-media-queries-2

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

  @media only screen and (min-width:769px){

.main-nav{ float:right; } }

  @media only screen and (min-width:769px){

.main{ width: 40.425531914894%; } }

  @media only screen and (min-width:769px){

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

Help me please.

4 Answers

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points

instead of creating a new media query for each CSS rule, you can use just one.
example-

@media only screen and (min-width:769px){

nav{ 
width: 500px;
}

.main-page{
color: white;
background-color: blue;
}

.footer{
display:none;
}

}
Brandon Smith
Brandon Smith
4,266 Points

Can you help me as well. I do not see what I am missing here. Code Challenge = http://teamtreehouse.com/library/websites/css-foundations-second-edition/media-queries/adaptive-layouts-with-media-queries-2

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

Carl Taggett
Carl Taggett
10,321 Points

Mohab Habib I had the exact same problem on this. You helped me out big time with out knowing it. Treehouse for life

Chase Lee
Chase Lee
29,275 Points

Can you give a link to the code challenge that your having problems with. Also here is a thread on how to display code in the forum.

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points

Brandon Smith - You need to first put a colon in front of the media query's min-width property. Second take a look at the last part of the question again -

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.

Brandon Smith
Brandon Smith
4,266 Points

Thanks a ton. I ended up figuring it out last night. Team Treehouse has been an amazing tool for me and my team. Thanks for the help!

I keep getting the same error after trying a number of times

"Bummer! Did you float .logo left?"

This is the code I'm entering:

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

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

Would really appreciate any help.

Nvm figured it out, was missing "}" from the previous line of code above what I entered. Love the site!

Same thing happened to me, Mohab Habib - might be the cause of a lot of this confusion here, Guil Hernandez

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thanks for the heads-up, Danny Sauter. Like Mohab Habib, were you also missing the }?

Guil Hernandez

Indeed I was - for the top section (task 1). Didn't trigger as an error in Task 1, but it causes an error in Task 2.