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
Timothy Parenteau
7,515 PointsHelp 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%;
}
15 Answers
Guil Hernandez
Treehouse TeacherIt 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
7,515 PointsThanks 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!
Julian Fields
8,983 PointsHey 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
7,515 PointsHey 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
8,253 PointsYou 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
7,515 Pointshmmmm..... I fixed those errors to those mistakes but still not working or accepting my code
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
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
8,253 PointsCan you post all of your code? Both the HTML and CSS.
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
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
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
7,515 Pointsoh 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
19,470 PointsI'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
19,470 Pointsif 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
7,515 Pointsall 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
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
19,470 PointsOk. 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
19,470 Pointsmake 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
7,515 Pointsstill 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
7,515 PointsGuil 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
Treehouse TeacherSorry 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
7,515 PointsHey 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
7,515 PointsIt keeps asking me did I float the logo left
Charles Gray
19,470 Pointsidth: 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
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; } }
Timothy Parenteau
7,515 PointsTimothy Parenteau
7,515 PointsIt just keeps telling me did I float the logo left and clearly I did.