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

Posted by Saul Casillas
Saul Casillas
3,566 Points

Can pass the code challenge on the adaptive layouts and media queries.

this is the original question hope someone can help me thanks.

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.

13 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Saul,

All I can say is refresh the browser and try again. I tried your code and it works.

Jeff

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

@media only screen and (min-width: 1000px) {
  .wrap {
    width: 980px;
  }
}
Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Saul,

I don't know what to tell you. What browser are you using? I just passed all three challenge questions with the code below.

Jeff

@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%;
  }
}

@media only screen and (min-width: 1000px) {
  .wrap {
    width: 980px;
  }
}
Saul Casillas
Saul Casillas
3,566 Points

Hey thanks I tried on explorer chrome and fire fox and nothing, Firs i get the error that if I float the logo to the left I paste it as you wrote it too and nothing there might be a bug on the code challenge lol thanks for your help Jeff

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

If you post your code here, that will help.

To format your code use the Markdown Cheatsheet (underneath the reply box here.)

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

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

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

Thanks I tried i refresh it and nothing i rewrote the code like this and now i get this is error

Bummer! Be sure you're using a media query no narrower than 769px.

this is how i rewrote the code:

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

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

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

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

Thanks I tried i refresh it and nothing i rewrote the code like this and now i get this is error

Bummer! Be sure you're using a media query no narrower than 769px.

this is how i rewrote the code:

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

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

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

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

Saul, your'e gonna kick yourself. Below is a portion of your code. I copied and pasted it. You closed your media query before any of the css.

@media only screen and (min-width: 769px) {
}    <----- RIGHT HERE

Jeff

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

thanks I saw it but still i get the same error

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

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

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

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

Hey Jeff I restarted my computer and that did it thanks for your help.

Saul Casillas
Saul Casillas
3,566 Points
Saul Casillas
Saul Casillas
3,566 Points

How do you make the code show it up in here i try to use it as the markdown sheet thanks once again.

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

Hi Saul,

Maybe this will help. How to display code

Jeff

John Balladares
PLUS
John Balladares
Courses Plus Student 9,828 Points
John Balladares
John Balladares
Courses Plus Student 9,828 Points

Weird - same thing that happened to Saul happened to me. Resetting my laptop did the job too.

jne
jne
12,613 Points
jne
jne
12,613 Points

Same happened to me now! Will try to restart my browser

Edit: my problem was that I didn't have space between "and" and "(min-width:769px)"