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

Elizabeth BABYCH
Elizabeth BABYCH
6,993 Points
Posted by Elizabeth BABYCH
Elizabeth BABYCH
6,993 Points

media queries

I have a challenge here and I am told to do everything we just covered in our lesson, like word for word. So after doing it correctly, it tells me I have not told .col to float: left, but I have. I have gone over this a few times already. Does anyone see if this is somehow wrong?

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.

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

2 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Try this. 

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

Also click edit on your post and you can view how to add code properly on the forum as I edited it for you :)

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Hi Lizzy, You have told .logo to float: left, but not .col. You should have 

.main,
.secondary,
.extra {
float: left;
}