Stuck on "Content Defined Breakpoints" Challenge

Try with just max-width not max-device-width. You have to get it exactly how they teach you.

Thanks Edward. That worked. However, I'm having a challenge with the 2nd task now, which is frustrating since I was doing pretty well with the challenges so far:

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

CSS I added:

@media screen and (max-width: 705px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;}

.grid_2 omega {display:none;}

}

HTML Markup:

<div class="grid_2 omega">
<img src="img/love-at-first-bite.gif" alt="Love at First Bite">
</div>

I wonder whether I should add an ID to the HTML, but I guess that's not the solution. Also, I tried adding image after the class identifier.

I believe it's within the #intro div if I recall. So you would use;

#intro img {
   display: none;
}

I may be wrong but this is from memory.

EDIT: UPDATED

Removing the element .grid_2 with display:none; would cause problems with other classes using this grid markup, the grid layout elements are intended to be re-used multiple times on pages so you would want to avoid using display: none; on those elements.

For instance if you had another image in a grid_2 class div somewhere else on the page but wanted it displayed, your code would hide all markup for those elements that use the class grid_2.

Thanks again Edward, but this was solved by ommitting the "omega" at the end of the identifier.

What is the best way to comprehend the information overload? code as I watch or watch focused, and then code and refer to videos if I get stuck? just finished "Responsive Websites" and trying to responsify the Smells Like Bakin' website...a bit lost to be honest!

Absolutely take your time with the videos, they are great and a good reference. Pause the video and code then press play again, go at a steady pace and just keep comparing your code with the teachers if you feel lost.