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

Adrian Novak
PLUS
Adrian Novak
Courses Plus Student 22,581 Points

Code Challenge: Adaptive Layouts with Media Queries (Task 2)

For the Adaptive Layouts with Media Queries code challenge task 2:

"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."

I don't know if I am missing something or if there is a bug. I get the "Bummer! Did you float '.logo' left?".

Here is what I have:

/* Tablets to Desktop */

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

  .logo {
     float: left;
    }
    .main-nav {
        float: right;
    }

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

}

Thanks!

7 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hey Adrian Novak,

Everything looks good. But I noticed that you have min-width: 796px defined instead of 769px.

I'll look into why the wrong hint is displaying. Thanks!

Adrian Novak
PLUS
Adrian Novak
Courses Plus Student 22,581 Points

I had a feeling that it had something to do with a mistype. I've been staring at it too long. Thank you for the quick response!

Evans B. Ofori
Evans B. Ofori
Courses Plus Student 13,720 Points

Recheck the โ€ .extraโ€ class, the question says โ€œcreate a new property inside the ".extra" rule that displays it as a block element." And I donโ€™t know why you put the width there.

I can't get this to pass either and getting the same hint. I have:

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

    .logo {
        float: left;
     }
     .main-nav {
         float: right;
      }

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

  }
Evans B. Ofori
PLUS
Evans B. Ofori
Courses Plus Student 13,720 Points

Hi Kate

Oops! Sorry, I was wrong with my first comment on Adrian Novak post.

I went to retake the code challenge using copy and paste your code. It passed without problem. What I would say is recheck the code above โ€œPhones to Tablets media queryโ€ you might delete the closing bracket without knowing it or something else.

hope it helps!

Thanks Evans! I tried again since you said it passed for you and I got through the exercise (and badge!) successfully in the end. Cheers for your help.

Henri Viiralt
Henri Viiralt
9,092 Points

Hi,

I have the exact same problem. Strangely enough, floating worked fine in the last exercise. This is doing my head in, been trying everything for the past 30min. Running on Chrome, code below.

/* Tablets to Desktop */

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

.main { width: 40.425531914894%; }
.extra { width: 23.404255319149%;
display: block; } .logo { float: left; }
.main-nav { float: right; } }

Nathan Bentley
Nathan Bentley
12,680 Points

I have fallen into the same trap too. I cant work out where I have gone wrong. I dont to copy your above answer to proceed unless i know why my version dont work. Something is wrong with the logo I am told.... can anyone help me? thanks

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

Henri Viiralt
Henri Viiralt
9,092 Points

What worked for me was to add a "}" to the end of /* Phones to Tablets */, guess I must have forgotten to add it during the last exercise.

Nathan Bentley
Nathan Bentley
12,680 Points

Thanks, but this is still not working. I have checked that.

Nathan Bentley
Nathan Bentley
12,680 Points

I have fixed this. In my case, I had to delete the 'old' copy already presented in the code challenge as this is copied into the new media query.

Having this same issue...and nothing is really working. Seems like a number of people are having the problem. No matter what, the error message is still

"Did you float '.logo' left?"

Any progress on this?

Thanks!

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Danny Sauter,

Sorry to hear you're having problems with the code challenge. Can you please post the code you used? I apologize if it's a bit confusingโ€“โ€“i'm looking into rewording it as we speak. :)

Thanks!

Guil,

Thanks for the quick response! Excited to get this figured out :)

Here's what I've got down for the "tablets to desktop" section. Again, spits out "did you float .logo right?"

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

Ah, my bad on the formatting, but hope you catch something. Thanks!

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Danny Sauter,

It looks like everything is correct. The only thing missing is the media query's closing }.

Hope this helps.

Guil Hernandez Thanks for your help. I think it was actually getting hung up on the fact that I didn't close the media query on the section above ("phones to tablets"). It didn't return an error on Task 1 for that, but it rejected it on Task 2. Anyways, all good now for me. Thanks!