Content Defined Break Points

The important thing to keep in mind here is that divs in the HTML are nested. All of HTML works this way, much of it is nested.

For example, lets say I had 10 images on a webpage. If I used

img { display: none;}

I would select all 10 of the images and not display any of them. But I could look up through the HTML, and see if the image I wanted is nested inside of another div, that no other image is, and in the case of this code example that is exactly our solution.

So how to solve this. Here are the step by steps since it is so important to understand how we got to the answer, instead of just copy and paste.

1) Look at the HTML structure. 2)Find our love at first site image in the HTML. 3)Look at what our div's our image are nested inside.

The next closest div the image is nested in is grid_2 and omega. Two different class options. Are any other images nested inside either of these two classes? Answer: YES! So those can't be our solution, let's move up to the next level of nesting.

4)We can see grid_4, but looking at the HTML, grid_4 is closed before our image, so it's not an option for being a selector, since our image is not nested inside of that div. Let's move up the HTML to the next div.

5)We can see we have a div with an id of 'intro', and our image is nested inside of it. Good news, now we need to see if any other image is nested inside of this div. Are they? Answer NO! Great news! We have found our parent div that we can use as a selector.

Now we need to add that to our media query, so we write it like so:

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

And this will select all images inside of an element with the id of intro, which with this HTML mark up this will work just fine -- and this code will allow you to pass the lesson.

I normally do not give out answers this bluntly, but I don't want you to be too stuck that you quit. Keep going strong. If you're like me, you will have a moment where this stuff just start to "click" and it starts to make more sense. It's all about problem solving, and being creative, and almost always there are more than one way to skin the cat. I hope you are able to understand how we got to this answer.

Good luck, don't give up.