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 Build a Responsive Website Responsive Design Content Defined Breakpoints

Derek Zinger
Derek Zinger
3,337 Points

Problem with media query in "Build a Responsive Website"

Build a Responsive Website > Responsive Design > Section 4

Caught in an endless loop here and can't see the problem. My answer to the second question in the code challenge doesn't seem to be taking. Question 1 is:

Write a media query at 705px where the layout begins to break, that forces grid_1 through grid_6 to span 100% width of the container.

OK. So my code is:

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

Perfect. Now I move on to question 2, which tells me to:

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

I add code to the end of the above media query, giving me this:

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

Apparently, this then breaks the media query from question 1 and sends me into an endless loop of returning to question 1, moving to question 2, and back to question 1. For the life of me I can't see the trouble here. Can anyone help?

2 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points

You have to hide the actual image, so it would be:

#intro img {
    display: none;
}
Derek Zinger
Derek Zinger
3,337 Points

Thanks. Tiffany! That's sorted it out.

Why is it not possible to set the .omega div to display:none?