Responsive Design: Code Challenge: Content Defined Breakpoints.

You are correct about the cut and paste and I couldn't agree more ( I like to learn) but sometimes its so darn frustrating to have do 3 code challenges and the first 2 work out OK but then the third causes you to move backwards and you lose the second code challenge then move back to the first and it all gets messed up so you have back all the way out and then re-start at the beginning and you still don't know where the wheels fell off.

So yes in desperation I cut and paste. Often if I know where I went wrong I can make a note of it in my book and just the act of writing something down helps me to remember the rule.

Let's take a look at the markup

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

What CSS would you use to select an <img> element, given that markup.

Hint: Use a very specific selector.

If you are confused about how to this, now might be a good time to work through the CSS Foundations course.

Dont know where your object comes from but the correct ID is:

#intro img{
display:none;
}

~ Nikos.

I would use the intro selector.

I was using the "object" is my id because my original code read

<object data="img/love-at-first-bite.svg" etc etc.

So naturally I thought since there was only one object statement in my div that this would work.

To quote from another a great line in another recent thread ...

Its so easy just to copy and paste - but it'll catch up with you later down the road.

This is such an important point to understand, for anyone who replies to a question here on the forum.

The goal of these forums is to help each other understand how it works, not to get past a code challenge.

Morrice - If you have any more questions about this code challenge, post what code you have so far and we'll try to point you in the right direction.

Ok from the top.

This is the challenge. Swap out the appropriate selector in the media query in the CSS so that the Love at First Bite SVG object still disappears when the viewport is less than 705px.

This is what I would do. 1) add the @media statement starting at "the grid_1 code" 2) define the width:% and then to...... 3) to make the image disappear I use the #image {display:none}

Do you agree with process?

Just thinking aloud

Moe

Hello Morrice, i think you have to rewatch some basic videos about css selectors. Just to make sure you understand there differences:

selectors with a "#" in front of them are ID's.

example:

#intro{
width: 100%;
}
// this gives the element with the id="intro" a width of 100%.

selectors with a "." in front of them are classes.

.color{
color: red;
}
// this gives the element with the class="color" a red text-color.

you can also nest them:

#intro .color {
color: red;
}
// this gives the element with class="color" inside and element with the id="intro" a red text-color.

Than there is other specific selectors without a "#" or a ".":

img{
border: 1px solid blue;
}
// this gives the all img-elements a solid blue border of 1 px.

Hope that helps, ~ Nikos.

PS: i already told you the correct solution in my first post.

Thanks Nikos

I am doing that right now.

Moe

What is the problem ?

@media screen and (max-width = 705px) {
  #intro img, object { display: none ; }
}