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

CSS

Nazaam Kutisha
Nazaam Kutisha
7,667 Points
Posted by Nazaam Kutisha
Nazaam Kutisha
7,667 Points

Stuck on a challenge question: Content Defined Breakpoints.

My response isn't working for this challenge question. Can any one help me with this?

Build a Responsive Website - Responsive Design - Content Defined Breakpoints http://teamtreehouse.com/library/content-defined-breakpoints

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

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  font-size: 1.25em;
  color: #faf3bc;
  background-color: #420600;
}

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */

@media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 
  {width:100%;  
}
  "love at first bite"  
  {display: none;}



  {
  margin-right: 1.25%;
  float: left;
  display: block;
}
.alpha { margin-left:0; }
.omega {margin-right:0; }

.container{
  width: 90%;
  max-width: 800px;
  padding: 4% 0;
  margin: auto;
}
img {
  max-width: 100%;
}
h1 {
  font-size: 1.750em;
  line-height: 1.25em;
  font-weight: 100;
  letter-spacing: -2.75px;
}

h2 {
  font-weight: 100;
  font-size: 1.15em;
  color: #b4c34f;
}
.cupcake {
  box-sizing: border-box;
  background-color: #faf3bc;
  padding: 8px;
  margin: 0 0 5% 0;
}

3 Answers

Shawn Jones
Shawn Jones
15,579 Points

On the html side of your code challenge, you should see a div tag that is the parent to the requested image to be removed. looks like this:

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

what they want you to do is target that img tag specifically that holds the image in place and ask it to be removed with the same media query you placed in step one. So you should be targeting that img specifically this way in your css.

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

  .grid_2 img { display : none;}

}

.grid_2 is the parent div to the img that your trying to remove. So you specify that first and then the img tag directly after it in css to target that tag. Everything else your thinking as far as property and value is correct. you use the display property show none so it disappears whenever the screen is at 705px or smaller. Hope this helps if you haven't figured it out yet.

luis caselli
luis caselli
800 Points

Thank you Shawn! I didn't understand that I had to target that "img tag" within that "parent div". Blame the lesson girl or me, fact is you explained it crystal clear.

Shawn Jones
Shawn Jones
15,579 Points

no problem, anytime.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

“love at first bite” is the alt text for the img tag. Find that image tag with the alt text. Then locate the class(es) of id(s) that it has.

After that select it in your CSS with either a .(period) for classes, or a #(hash or pound) for ids. It should look something like this:

.class{
    display: none;
}

Or this:

#id{
    display: none;
}
luis caselli
luis caselli
800 Points

Thanks a lot for your time Chase! Your answer was really helpful. I know now what to target, that was what I didn't understand at first.

Nazaam Kutisha
Nazaam Kutisha
7,667 Points
Nazaam Kutisha
Nazaam Kutisha
7,667 Points

Many thanks for all your responses. I really appreciate the feedback & it was very helpful.

Changing the css media query From:

"love at first bite"
{display: none;}

To:

intro img {

display: none;}

Was the correct response.

Again Many Thanks!

Shawn Jones
Shawn Jones
15,579 Points

no problem. anytime.