Content Defined Breakpoints Challenge – Seems to be broken?

The instructions, for reference:

Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear.

So then, you need to hide the img element that is inside the omega div, not the div iteself.

Let us know if you have any other questions.

Perfect, thanks for the help!

@Kevin - Always glad to help. Let us know if you need anything else.

I got stuck on this as well, and was trying to use the nth-type-of, which was probably a messy solution. My only concern with using ".omega img" was that maybe in a bigger page you wouldn't want all images following that class to disappear. I know this was a simple example, but what is the best practice here? Should the div containing that image be assigned an id?

@Sam - You are over thinking this, remember use a selector that is as specific as you need, but no more.

In the real world I'd use:

#intro .omega img { display: none; }

I'm having real difficulty with this! I am trying to define #intro and img but it is still not disappearing. I've tried various versions. I saw your real world version James, but #featured-cupcakes isn't the div, intro is, and if I try it as you have said it still doesn't work! So far I have: #intro .omega img { display: none; }

I think in the case of this example, just use .omega img { display: none; } . Thats what I did and it cleared.

Lynne, can you post all your code into something like http://codepen.io/ so we can see the bigger picture. Many Thanks :-)

@Lynne Apologies, that was a typo. I meant in the real world I would actually use the div in the selector obviously. Fixed now.

I think this is actually a bug with the test.

This works:

.omega img { display: none; }

This should work, but the preview is incorrect:

#intro .omega img { display: none; }

This is proof (I believe) this is a bug, someone let me know if I missed something.

http://codepen.io/barnettjw/pen/jabkh

I borrowed the images from the http://smellslikebakin.com remember to resize your view port to below 705px to see the media query make effect.

Kevin, no that didn't work for me, for some reason.

Caroline, the question is: Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear.

And the code I have so far is here is here: http://codepen.io/joe/full/txnDf

Any ideas?

Thanks guys :)

Ah, first time I've used Code Pen, let's try that again: http://codepen.io/joe/pen/txnDf

Sorry!

try adding a closing curly brace } to the end of:

width: 100%;

@Lynne -

You are missing a bracket. You posted this:

@media screen and (max-width: 705px) {
    .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6 { width: 100%;

 #intro .omega img {
    display: none;
   }

}

Formatted a little differently:

@media screen and (max-width: 705px) {
   .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%;
    #intro .omega img { display: none; }   
}

You are missing a closing bracket on for the first rule.

As I mentioned in my post, while that is valid CSS, it won't pass the code challenge check due to an apparent bug in the testing engine.

Code that the testing engine accepts is:

@media screen and (max-width: 705px) {
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6 { width: 100%; }
    .omega img { display: none; } 
}

Aha, I know what it was, just had a proper look back at all the code, and realised I had missed off the end 'curly bracket' from the grid, width section, which obviously then caused a problem on the next section.

thanks a lot for your help guys. Already learned loads today just from making mistakes!! :)

No problem Lynne - that's the only way to learn and get better! :-)

Wooh teamwork! You guys are so awesome :D

So glad it's working for you! Don't hesitate to post on the Forums or email me directly for help ^.^ help@teamtreehouse.com

James, thank you for figuring this out!

@Adam - You're very welcome.

Let us know if you have any other questions.