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

Posted by Roscoe Coney
Roscoe Coney
13,124 Points

What am I doing wrong?

The following question asks:

Challenge task 2 of 3 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.

What I have:

/* Phones to Tablets */
@media 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 screen and (min-width:769px) {
  .logo {
  float: left;
  }

  .main-nav {
  float: right;
  }

  .main {
    width: 40.425531914894%;
  }
  .extra {
  display: block;
    width: 23.404255319149%;  
  } 
}
Wayne Priestley
Wayne Priestley
19,579 Points

I've edited your code so it appears correct in your post.
Here is a link to explain how to use Markdown to post your code How to post code

3 Answers

Shawn Jones
Shawn Jones
15,579 Points

Your missing a curly brace after the first media query. because the first media query isn't closed correctly, the second one will fail.

This is what you have:

/* Phones to Tablets */
@media screen and (min-width:481px) {
  .col {
    float:left;
  }

.main {
    width: 65.957446808511%;
}
.secondary {
    width: 31.914893617021%; 
}
.secondary,
.extra {
    margin-left: 2.127659574468%;
}

This is what you need:

/* Phones to Tablets */
@media screen and (min-width:481px) {
  .col {
    float:left;
  }

.main {
    width: 65.957446808511%;
}
.secondary {
    width: 31.914893617021%; 
}
.secondary,
.extra {
    margin-left: 2.127659574468%;
}

}/* you need another one of these guys ( } ) here. this closes the media query for 481 */

So this should be your end result I moved the braces around so you can see it clearly:

/* Phones to Tablets */
@media screen and (min-width:481px) {
  .col {
    float:left; }

.main {
    width: 65.957446808511%; }

.secondary {
    width: 31.914893617021%; }

.secondary,
.extra {
    margin-left: 2.127659574468%; }


}/* this is what you didn't have, it closes the query*/


/* Tablets to Desktop */
@media screen and (min-width:769px) {
  .logo {
  float: left; }

  .main-nav {
  float: right; }

  .main {
    width: 40.425531914894%; }

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


}/*you actually did it down here*/

Hope that helps.

Roscoe Coney
Roscoe Coney
13,124 Points

GENIUS

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Roscoe,

What error message are you getting?
Are you making any changes to /* Phones to Tablets*/?

Roscoe Coney
Roscoe Coney
13,124 Points

Bummer! Did you float '.logo' left?

Roscoe Coney
Roscoe Coney
13,124 Points

I made changes to /Phones to Tablets/ in step 1.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

You definitely floated it left.
Can you try moving the .logo{ float: left ;} to a different position in the media query. Look to see if you get a different error message.