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
Brenda Cavalier-Spencer
1,634 PointsImplementing Media Queries -Code Challenge
Build a Responsive Website>Adaptive Design>Implementing Media Queries
Q 1. add the appropriate CSS code to the CSS to make images scale with the fluid grid.
Here is what I have but is not being accepted. Any help would be greatly appreciated!
/* Mobile ----------- */
@media screen and (max-width : 480px) {
.cupcake img{
max-width:100%;
}
}
/* Tablet ---------- */
@media screen and (max-width : 1024px) {
.cupcake img{
max-width:100%;
}
11 Answers
Noelle Derr Brockhoff
5,357 PointsWhat worked for me was to ignore the media queries altogether, and go directly to the 'img {' selector that's immediately below the 'body {' selector and add:
max-width: 100%;
...and that's it. Honestly, it was a last ditch effort on my part, and I'm not sure where this was stated in the video, but it seems to work.
James Barnett
39,199 Points@Brenda- You are over thinking this.
To make images scale to a fluid grid use:
img { max-width: 100%; }
It allows images to scale to the size of their container, but no larger
Jordan Warnholtz
3,705 PointsYour max widths are already defined by media queries, all you need to do is provide a width to your div with the appropriate identifier. For example:
@media screen and (max-width: 480px) {
.class {
width: 100%;
}
}
Not sure if that helped or not. You'll need to provide more in-depth info for a more accurate response.
Jordan Warnholtz
3,705 PointsI just realize you provided the wrong piece of code. What they want you to do is this:
img {
width: 100%;
}
It's got nothing to do with your media queries. This allows images to scale to the appropriate size depending on what dimensions it's being viewed.
Brenda Cavalier-Spencer
1,634 PointsThank you all so much for your help, unfortunately none of these solutions are working for me.
I have tried using just img as well as .cupcake img and just .cupcake with max-width at 100% but I keep getting the bummer message.
James Barnett
39,199 Points@Brenda - Post a screenshot of your code in the code challenge, that may help us figure out the issue you are having.
Brenda Cavalier-Spencer
1,634 Points
Brenda Cavalier-Spencer
1,634 PointsI tried to post the image using the Markdown Cheatsheet reference of 
but the only thing that showed on my post above is the title I used which was "screenshot." Not sure how to provide you the screenshot.
James Barnett
39,199 Points@Brenda - You can only embed actual image URLs so ones that end in .jpg, .gif or .png. Try using a direct link from imgur
rina andrejev
1,486 PointsI am having issues with the Implement Media Queries Challenge. I have tried:
/* Mobile ----------- */ @media screen and (max-width : 480px) { .contact, .menu { width: 100%; } @media screen and (max-width: 480px) { .cupcake { display: none; } }
I figured out the .contact and .menu on my own. This is making me crazy: 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
I guess I do not understand what all the images in the div class ".cupcake" are.
Here is what is in the code challenge:
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox / -webkit-box-sizing:border-box; / Safari */ } #container { max-width: 1000px; width: 100%; margin: 0 auto; } .menu { width: 60%; margin: 0 0 2% 0; float: left; }
ul.prices {
font-size: .75em;
list-style: none;
padding: 2% 0;
margin: 0;
}
.prices li {
float: left;
width: 33.3333333%;
}
.cupcake {
border-bottom: 1px dotted #FAF3BC;
padding: 5% 0;
}
.cupcake p {
margin: 0;
}
Any help you can lend would be greatly appreciated. I have hit a wall on this one.
Thanks, Rina
James Lister
6,569 PointsI'm also having issues with this challenge. How is the code supposed to look? /* Mobile ----------- */ @media screen and (max-width : 480px) { img { max-width: 100%; } }
Although that seems to physically do the job, the error message still comes up and I can't advance. Did anyone get there in the end?
Cecily Madanes
Courses Plus Student 3,384 PointsSame problem, and Noelle's solution was the only that worked.