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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Bartin Peguero
Bartin Peguero
2,291 Points
Posted by Bartin Peguero
Bartin Peguero
2,291 Points

Responsive CSS Challenge Task bug?

Hello,

I think i found a bug in the responsive css lessons on the 4th part (the 2 challenge questions). It say i got the question correct even though I used an opening curly brace instead of a closing one at the end. Also in challenge task 2 it says my answer is incorrect when i'm not sure it is. Please help!

https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/write-css-media-queries

My Code for part 1 and then 2:

@media screen and (min-width: 480px) {
  h1{
    font-size: 2.5em;
  }
{

 @media screen and (min-width: 660px) {
  h2{
    font-size: 1.75em;
   }
 }
Max Kutner
Max Kutner
7,595 Points
Max Kutner
Max Kutner
7,595 Points

I posted the exact same code and passed both tasks. Sometimes, the challenges can be buggy and/or extremely sensitive (i.e. detecting an answer you may not have submitted).

@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }

@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } }

Bartin Peguero
Bartin Peguero
2,291 Points
Bartin Peguero
Bartin Peguero
2,291 Points

Max Kutner , Konrad Pilch - Thanks ill try again later today.

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Bartin,

It's not a bug in the challenge but rather how the browser processes the css.

When a browser encounters something unexpected like the misplaced left curly brace you used, it will continue parsing the css and try to recover from that error. Once and if it's able to recover before reaching the end of the file it will continue processing the rest of the css as normal. All of the css from when the parse error started up until it's able to recover will be discarded.

This is what I think you had for task 1:

@media screen and (min-width: 480px) {
  h1{
    font-size: 2.5em;
  }
{

The reason this passes is because the css is fine up until the left curly brace on that last line where you were supposed to use a right curly brace. The parse error begins there and it then tries to recover by trying to find a matching closing brace. But that's the end of the file and so the left brace is discarded and the browser automatically closes the media query block for you.

The reason task 2 doesn't pass is because the browser is trying to recover from that misplaced left brace and it reaches the end of the file before matching up all the braces. This means it discards from that left brace all the way to the end of the file. There was nothing wrong with the 660px media but because of the parse error that came before it it's like it was never there.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Remember to put the code last. The media queries should go last in the style-sheets.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Most people write it correct but put the code up above, where it should be at the bottom. - Many people asked this question and i given the exact same answer.

Roslynn Tellvik
Roslynn Tellvik
2,790 Points
Roslynn Tellvik
Roslynn Tellvik
2,790 Points

Occasionally a Code Challenge screen will only allow me to add code as far down as the 14th line from the top. Anyone else experienced this and found a work around? I'd like to proceed past this responsive CSS challenge on media queries, but it requires me to place the code at the end and the Code Challenge screen will not let me go down to the end. Maybe I am supposed to delete previous Code Challenge entries and therefore not have to type beyond the 14th line? Thanks for any help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Roslynn,

That's strange. I have not heard anything like this before. One thing I can say for sure is that you don't want to delete code that is already there in order to get it under 14 lines. In multi-step challenges you'll start getting error messages that previous tasks aren't passing anymore.

Do you see more than 14 lines but the cursor will not go past the 14th line or do you only see 14 lines based on your screen size and the browser will not scroll down to see more?

Is it consistently every challenge with more than 14 lines of code or some long ones work and some don't?

I take it that this is happening for you right now for this particular challenge? Have you tried another browser?

This is a problem that it might be best to contact support on.

I would do some experimenting to see if you can narrow down the cause and give them as much information as you can. Try different browsers and a different monitor size if you have access to one just to see if it might somehow be related to your screen size.

Screenshots would be helpful here so they can see what you're seeing.

Roslynn Tellvik
Roslynn Tellvik
2,790 Points
Roslynn Tellvik
Roslynn Tellvik
2,790 Points

Thanks, Jason. I believe I figured out what was happening. My wifi signal was weak and I had to wait a longer time than I realized for the Code Challenge screen to load completely. Once I waited longer, the code area would allow me to input code anywhere, including at the bottom.