Troubles with implementing media queries/ 2. task in quiz

Well there is two things wrong with your code!

1. Your selecting a ID instead of a class (id= "#" class=".") in the instructions it states to select the CLASS of "contact" and "menu" so switch the "#" to "."

2. Your telling the browser that the element is allow to go to the max-width of 100%. You need to tell the browser you want the elements to be 100% so change the CSS to width: 100% on both elements

I hope this helps and explains whats going on! :)

Oh, thank you. That explains it pretty good.

So now I write this in the thirt task, in which you have to hide the cupcake-div.

.cupcake { display: none; }

But neither "." nor "#" works. What do I do wrong?

What are the instructions exactly?

Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide.

make sure the cupcake div is inside the media query the code is valid just make sure your placing it in the right area

Like this?:

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

  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12 {
        width: 100%;

}

.contact { width: 100%; }

.menu { width: 100%; }

#cupcake { display: none; } }

change the "#" to "."

That doesn´t work :(

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

  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12 {
        width: 100%;

}

.contact { width: 100%; }

.menu { width: 100%; }

.cupcake { display: none; }

}

thats because all of your code is out side the media query

? possibly

Hm, you mean the { } that define the

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

?

No, the braces frame the tag. The grids, the .contact, .menu and .cupcake.....sorry, in my last post there is one brace at the end missing, but it´s there in the code and closes the tag.

@media screen andn (max-width: 480px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width: 100%; } .contact { width: 100%; }

.menu { width: 100%; }

.cupcake { display: none; }

}

try this!

Nope. Still not working....

I am having the same problem I have tried many different things and just not understanding part 3 of the quiz. PLEASE HELP

@ian - Create a new thread and post what code you have so far. Remember to indent each line of your code with 4 spaces so the forum will format it correctly.

/* Mobile ----------- */
@media screen and (max-width : 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12{
    width:100%;}
 .cupcake{
      display: none;}

.contact {
  width: 100%;
  }
    .menu {
  width: 100%;
  }

 }

This is the code that I have. I have tried this also as #cupcake.

I'm also not seeing how this works. The video wasn't effectively explicative of all this.

I would appreciate some assistance, reviewing the video over and over again has not yielded more clarity.

Thanks. This is what I have:

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

  .menu,
  .contact {
        width: 100%;
  }
  .cupcake {display: none;
  }

}

Any suggestions?

Noah - Build a Responsive Website is an intermediate course. If you are a little fuzzy on some of the details of CSS, now might be a good time to check out the CSS Foundations course.

The correct code for the Challenge is

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

I too have had countless issues with this task and I keep seeing the same suggestions to take CSS Foundations over again in every thread.

In the future it would be helpful to the users to if you would address the questions at hand rather than diverting to other course work. From one google search I found 4 threads on this exact task and only one person mentioned the img part of .cupcake img { display: none;}

Unfortunately this was not my issue however it was everyone else's in each of those threads. Fortunately I have resolved my issue thanks to a forum poster on this thread.

My question was: Add the appropriate CSS code to the media query so that ".contact" and ".menu" fill the entire container width when the device or browser width is at most 480px wide. Here is the way the code should look like if you're being stumped by this question.

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

This the solution to this task:

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

That is all that it is required.

I don't see why not to post to it if someone else will be searching for the same information in the present or future.

As an explanation for above:

The main issues most posters in here seemed to be facing was that the attributes they were trying to style within the media query were not contained within in the media query

i.e. within the { } following the media query declaration.

Also it was noted some had used # when trying to select the div where it should have been (.) to select the class. (A point alone with no set of brackets/parentheses).

Hope this clears up any confusion.

As an explanation for above:

The main issues most posters in here seemed to be facing was that the attributes they were trying to style within the media query were not contained within in the media query

i.e. within the { } following the media query declaration.

Also it was noted some had used # when trying to select the div where it should have been (.) to select the class. (A point alone with no set of brackets/parentheses).

{Because the goal of the forum is to give help not answers. Don't provide someone with just the answer - explain the process, and help guide them through understanding the problem.}

As I attempted to rectify with the above. I can't unscramble the egg. Feel free to remove the post if you feel it necessary.

I have no questions for you.

Thanks.

This what I got for part 2 and 3. 2 keep it DRY. Don't over think it.

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