Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Timothy Parenteau
Timothy Parenteau
7,515 Points

Help with media queries stage 13 challenge task 2 of 3

What am I typing wrong?

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

Timothy Parenteau
Timothy Parenteau
7,515 Points

It just keeps telling me did I float the logo left and clearly I did.

15 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Timothy Parenteau,

It looks like you're not including the full .main and .extra rules inside the media queries. I've added comments to your CSS above.

Timothy Parenteau
Timothy Parenteau
7,515 Points

Thanks Guil! That worked! For some reason the first challenge let me get away with what I typed up top so I was just duplicating that with the next one. Make sure you guys fix that for future students! Thanks again :) Cheers!

Hey man, your brother is teaching and mentoring me in web dev. Pretty awesome. I would check your syntax and make sure you've closed everything. I'll try plugging it in the text editor, the code in the comment bar is hard to read.

Timothy Parenteau
Timothy Parenteau
7,515 Points

Hey what's up man! yeah he told me about you! Hope everything is going well :) yeah I have checked everything and fixed all my closing brackets and colons and semicolons but still no go :(

Michael Joyce
Michael Joyce
8,253 Points

You have a few mistakes in your code.

/* Tablets to Desktop */ 
@media only screen and (min-width: 769px) {
    .logofloat:left /*<-- missing semicolon */
}

.main-nav {
    float:right
}
} /*<-- extra closing parenthesis */

.main {
    width:40.425531914894%
}

.extra {
    display:block;
    width:23.404255319149%
}
Timothy Parenteau
Timothy Parenteau
7,515 Points

hmmmm..... I fixed those errors to those mistakes but still not working or accepting my code

Charles Gray
Charles Gray
19,470 Points

/* Tablets to Desktop / @media screen and (min-width: 769px) { .logo { float: left; } .main-nav { float: right; } /.main .extra .secondary ---does all this go in the bracket for media screen?*/ .main { width: 40.425531914894%; } .extra { display: block; width: 23.404255319149%; } hopefully this is a little more organized

Timothy Parenteau
Timothy Parenteau
7,515 Points

.secondary is not required... I copy and pasted your code but it still doesn't work... I am literally at a stand still with this challenge.

Michael Joyce
Michael Joyce
8,253 Points

Can you post all of your code? Both the HTML and CSS.

Timothy Parenteau
Timothy Parenteau
7,515 Points

<!DOCTYPE html> <html> <head> <title>Media Queries</title> <link rel="stylesheet" href="page.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <header class="main-header"> <a class="logo" href="#">Logo</a> <nav class="main-nav"> <a link href="#">Link 1</a> <a link href="#">Link 2</a> <a link href="#">Link 3</a> <a link href="#">Link 4</a> </nav> </header> <div class="content"> <div class="main col"> Main </div> <div class="secondary col"> Secondary </div> <div class="extra col"> Extra </div> </div> <footer class="main-footer"> Footer </footer> </div> </body> </html>

Timothy Parenteau
Timothy Parenteau
7,515 Points

```/* Phones to Tablets */

.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; } @media only screen and (min-width: 481px) { .col { float: left; } .secondary .extra }

/* Tablets to Desktop */

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

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

Michael Joyce
Michael Joyce
8,253 Points
/* Phones to Tablets */

.main {
    width: 65.957446808511%;
}

.secondary {
    width: 31.914893617021%;
}

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

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

    .col {
        float: left;
    }

    .secondary .extra; /*<-- What are you trying to do here? */
}

/* Tablets to Desktop */

.main {
    width: 40.425531914894%;
}

.extra {
    width: 23.404255319149%;
}

@media screen and (min-width: 769px) {
    .logo {
        float: left;
    }

    .main-nav {
        float: right;
    }

    .main {
        width: 40.425531914894%;
    }

    .extra {
        display: block;
        width: 23.404255319149%;
    }
}
Timothy Parenteau
Timothy Parenteau
7,515 Points

oh I didn't see the semi colon on the extra at the top but after removing that I still have no luck.... it wont accept

Charles Gray
Charles Gray
19,470 Points

I've had a problem with floats before. float what you want to the right but everything else needs to be either floated to the left or have a clear:(left, right or both). The other thing is make sure you have space for all your items that you float that includes padding, margin, and borders.

Charles Gray
Charles Gray
19,470 Points

if you haven't change this in your code, make sure each media query has a pair of curly braces for every css option. For example it you have two css styles you should have a total of 6 curly braces.

Timothy Parenteau
Timothy Parenteau
7,515 Points

all curly braces are counted for.... at this point I think it's a glitch or something. I have done everything right and everybody seems to be typing out the same code I've come up with after starting over multiple times. I am just going to skip the challenge I guess. Which blows because I wont get the points and I can't do the next task. Sucks. Thanks for everyone's help non the less!

Charles Gray
Charles Gray
19,470 Points

@media screen and (max-width: 768px) { body { background-color: #FF6347; color: #fff; } }

this is what a media query looks like for 768px or less

Charles Gray
Charles Gray
19,470 Points

Ok. I see your problem...everything goes inside of the media query. read were it says "then, add all other css inside the media query.

Charles Gray
Charles Gray
19,470 Points

make sure you don't have a curly brace between you media query and you css. The last closing css should have two curly braces at the end.

Timothy Parenteau
Timothy Parenteau
7,515 Points

still not letting the code go through... I truly think it's a bug in the test... I passed the first challenge no problem and it's almost the same question. I also looked at the video before to see what he typed in during the lesson of that challenge and I am not doing anything wrong. This is very frustrating but I guess I have spent 24 hours on this challenge with no response from the Treehouse team so i will just move on. Thanks for all your help guys! I would like to know how to post my code in a black box like all of you guys who have done it in the comments though for easier troubleshooting if anyone would like to share that information!

Timothy Parenteau
Timothy Parenteau
7,515 Points

Guil Hernandez is there any help here so I can continue my education in the course? I am now at a complete stand still. I can no longer advance without getting past this quiz challenge :(

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Timothy Parenteau,

Sorry you're still having problems with the code challenge. Can you post your latest code here so that I can take a look? :)

Thanks!

Timothy Parenteau
Timothy Parenteau
7,515 Points

Hey thanks for responding Guil!

/* Phones to Tablets */

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

/* These rules up here ^^ need to be in the media query below */

@media screen and (min-width: 481px) {
  .col {
    float: left;
  }
  .main  /* This is an empty CSS rule with no declarations. You can remove this. */
  .secondary
}

/* Tablets to Desktop */

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

/* These rules up here ^^ need to be in the media query below */

@media screen and (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .main
  .extra {
    display: block;  /* Only .extra needs to be displayed block */
  }
} 
Timothy Parenteau
Timothy Parenteau
7,515 Points

It keeps asking me did I float the logo left

Charles Gray
Charles Gray
19,470 Points

idth: 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 { width: 23.404255319149%; display: block; } }

Charles Gray
Charles Gray
19,470 Points

/* Complete the challenge by writing CSS below */

/* 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 { width: 23.404255319149%; display: block; } }