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 trialraymond pope
10,614 PointsStuck on a question in responsive design stage 3 (Adaptive Design)
Hi all Can someone point me in the right direction to answer the following question:
"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."
My answer is:
@media screen and (max-width : 480px) {
.contact {
width: 100%;
}
.menu {
width: 100%;
}
.cupcake {
display: none;
}
}
But that doesn't seem work. I've tried many alternatives also with no luck. So if there is anybody who can share their knowledge with me it would be most appreciated :)
4 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsYou need to include the media query. To get you started it would look like this
@media screen and (max-width: 480px) { }
Then you would include any properties that need to be included at that screen size.
Hope this helps. Give a shout if stuck
raymond pope
10,614 PointsHi Adam Thanks for the very quick response. I have the media query already. This is how the whole thing looks:
@media screen and (max-width : 480px) {
.contact {
width: 100%;
}
.menu {
width: 100%;
}
.cupcake {
display: none;
}
}
Sorry about the confusion! Cheers all the same.
Adam Sackfield
Courses Plus Student 19,663 PointsBill Wood is correct raymond pope you need to use the img selector
@media screen and (max-width: 480px) {
.cupcake img {
display: none;
}
}
Hope this clears it up
William Wood
4,789 Pointsjust a guess, but if you select .cupcake class, you need to specify the image by selecting img ... in other words, .cupcake img { bla bla}
raymond pope
10,614 PointsThanks, that worked but I did try that same combination last night and it didn't give me the green light. I was surprised as that was the obvious solution. I must have missed something or the was a bug in the system. Anyhow the green light's been given. :)