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!
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
Dominick Bueno
2,870 PointsCode 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.
@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
Courses Plus Student 9,647 Pointsinstead 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;
}
}
Carl Taggett
10,260 PointsMohab Habib I had the exact same problem on this. You helped me out big time with out knowing it. Treehouse for life
Chase Lee
29,275 PointsCan 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
Courses Plus Student 9,647 PointsBrandon 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
4,266 PointsThanks 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!
Elliott Frazier
Courses Plus Student 9,647 PointsNo problem. great job figuring it out!
Mohab Habib
6,389 PointsI 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.
Mohab Habib
6,389 PointsNvm figured it out, was missing "}" from the previous line of code above what I entered. Love the site!
Danny Sauter
3,992 PointsSame thing happened to me, Mohab Habib - might be the cause of a lot of this confusion here, Guil Hernandez
Guil Hernandez
Treehouse TeacherThanks for the heads-up, Danny Sauter. Like Mohab Habib, were you also missing the }?
Danny Sauter
3,992 PointsIndeed 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.
Brandon Smith
4,266 PointsBrandon Smith
4,266 PointsCan 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%; } }