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 Christopher Burge
Christopher Burge
4,964 Points

Challenge Error?

I have been frustrated by this challenge. Am I missing something? It seems pretty straightforward. It tells me that I am not specifying the right width....

Challenge Question:

Create a new media query that sets the width of .wrap to 980px if the viewport is 1000px or wider.

Code:

@media only screen and (min-width: 1000px) {    
    .wrap {
        width: 980px;
    }
}

Error message:

Bummer! Did you specify the right width?

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Christopher;

This particular challenge seems to want this media query at the very end of the file.

This passed for me:

/*****************************************
** COURSE:  CSS Foundations
** Module:  Media Queries
** Challenge: Adaptive Layouts with Media Queries
** Task: 3 of 3
*****************************************/

@media screen and (min-width: 1000px) {
  .wrap {
    width: 980px;
  }
}

Happy coding,

Ken

Christopher Burge
Christopher Burge
4,964 Points

Hi Ken,

Thank you so much for your response, however, the second task in this challenge is giving me a similar error and I know this is correct as I have already passed this task multiple times. So... I can't even get to task 3 now...

Challenge: 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.

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

Also, on task 3, when I have entered the code, it had been at the very end of the style.css file.

What gives? Chris

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Christopher;

Here is what passed for me, see commented code:

/*****************************************
** COURSE:  CSS Foundations
** Module:  Media Queries
** Challenge: Adaptive Layouts with Media Queries
** Task: 1 -3 of 3
*****************************************/


/* Complete the challenge by writing CSS below */

/* Phones to Tablets */

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

/******************************
**  CHALLENGE TASK 1 - start
******************************/

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

/******************************
**  CHALLENGE TASK 1 - end
******************************/


/* Tablets to Desktop */

.main {
    width: 40.425531914894%;
}
.extra {
    width: 23.404255319149%;
  display: block;               /* CHALLENGE TASK 2 */
}

/******************************
**  CHALLENGE TASK 2 - start
******************************/

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

  .main-nav {
    float: right;
  }
}

/******************************
**  CHALLENGE TASK 2 - end
******************************/


/*****************************************
** CHALLENGE TASK 3 - start
*****************************************/

@media screen and (min-width: 1000px) {
  .wrap {
    width: 980px;
  }
}

/*****************************************
** CHALLENGE TASK 3 - end
*****************************************/

For whatever reason, the verifier on this particular challenge seems to cause folks headaches.

Ken

Christopher Burge
Christopher Burge
4,964 Points
Christopher Burge
Christopher Burge
4,964 Points

Ken,

Thank you again for your help!!! That was definitely a headache, but nice to know it wasn't just me.

Chris