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 James Underwood
James Underwood
6,256 Points

Under "Tablets to Desktop," create a new media query that floats .logo left and .main-nav right if the viewport is 769px

Please help!

I can't see what I've done wrong here:

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

}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I fixed your code formatting to make it easier to read.

See this thread for how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum

1 Answer

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Looks like you left off your closing curly brackets for your first media query and the .extra selector within it. Add two } before /* Tablets to Desktop */ and see if that does the trick.

James Underwood
James Underwood
6,256 Points

Thanks Shawn, I'll give it a whirl