code challenge on Implementing Media Queries

I have to agree. This video seems very rushed and does not explain the code enough to complete the challenge. Fortunately, this discussion has helped me with the steps in the challenge. Better hints would be nice after you have tried a certain number of times.

Hey Nathan,

Sorry about my post before. I was thinking about the wrong code challenge, and this one apparently has nothing to do with grid layouts. I'm glad to see that you got part 2/3 correct despite my bad advice.

In terms of getting the image to disappear, remember to use the correct CSS selector to select images from the .cupcake div. It looks as if you're just making the div itself disappear. For example, if I wanted to hide the ul in the .cupcake div, I would add the following to my media query:

/* Mobile ----------- */
@media screen and (max-width : 480px) {
  .contact, .menu{
    width: 100%;
  }

  .cupcake ul { // Notice that I'm selecting the element I want to hide.
    display: none;
  }
}

So, if you wanted to hide the images in the div with a class of .cupcake you would have to select them in a similar fashion. Does that make sense?

Sorry about the confusion earlier. Hopefully my advice is more helpful this time around.

Best wishes,

J.T.

Nathan,

You're on the right track. As long as you're writing your media query correctly, you'll want to remember to override the predefined grid_ classes within your media query so that the width of each of them is the requested width. Does that make sense?

Let me know if you're still getting stuck, and I'll be more than happy to help you through it.

Best of luck!

J.T.

Hi JT, thanks for the tip but I cant see any grid classes in this... and am still kinda of stuck!

This is what I wrote in media query...if you can spot any errors? Thanks

/* Mobile ----------- */
@media screen and (max-width : 480px) {

#container {width: 480px;}
.menu {width:100%;}
.contact {width:100%;}

}

@Nathan - You're almost there, the instructions don't say anything about the container div.

Thanks James - I finally got it but now stuck on the next step about cupcake to disappear at 480px. You must think I am not paying attention! this is my attempt....

/* Mobile ----------- */ @media screen and (max-width : 480px) { .menu {width:100%;} .cupcake {display: none;} .contact {width:100%;} }

what am I doing wrong? :(

Hi, thanks, but I dont think it is working yet... I wrote this below but kept getting ' The image is still visible even when the device width is less than 480px'.... is there something else I need to do?

/* Mobile ----------- */ @media screen and (max-width : 480px) { .menu, .contact { width: 100%;} .cupcake ul {display: none; } }

@Nathan - What JT was showing you was an example ...

If the question was about selecting a <ul> then that's an example of how you would do it.

However, what you are trying to do on that step of the code challenge is to select images. So how would you change the code you posted to, select images inside of the cupcake div?

(note: oops someone answered while I was writing without updating the page, but now I can't get rid of this, just edit!)

I guess J.T. was giving you a hint rather than the actual answer (is it really a matter of ul here or...something else maybe?)

Let me tell you I had to do this again and again like 100 times before finding what was wrong with my code (misplaced curly bracket in my case) and after a while I think you get so frustrated you'd better take a little break and come back and I'm sure you'll get it alright! ;-)

Ha ha, I got it now... thanks. I confess I worked it out from a recent post that has the same query as me and the person who helped gave a straight answer to that person! I appreciate you guys helping without giving me direct answers! Thanks James and JT.

Gisella - you are right... but I do take lots of breaks to try again! I only used the forum as a last resort but need to keep moving on otherwise I will lose momentum.

im still stuck on task 2, this is the code ive written inside the media query, but is still wrong..

 container {
  width: 480px;
    .menu {
    width:100%;
    }
    .contact {
    width:100%;
    }
}

any help would be appreciated,

Hi Rocco, you don't need to put #container - media query already specified 480px....

@media screen and (max-width : 480px) {      
  .menu {
    width: 100%;
            }
 .contact {
    width: 100%;
            }
}  

I am a little baffled on 3/3 of this challenge. Seemed a little rushed in the video and I didn't quite understand. I am using the following code; .cupcake {display: none;) But I don't understand why that won't work. We are trying to hide (no longer display) the image in the div 'cupcake'. Is this correct? Thanks in advance.

Hi Alexander take a look on this forum : Help with Implementing media queries. Am stuck on task 3/3: Add CSS code so that images within the ".cupcake" div disappear.

Alexander

there is a problem with your code, you are using a closing parenthesis instead of a closing brace. Hope that solves your problem :) R

Glad to see you guys got this resolved!

Thanks everyone this has been a great help.