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
Timothy Virden
9,792 PointsCode Challenge: Implementing Media Queries
I have been stuck on this challenge for quite a while now and no matter what I do, can't seem to get it right. It is part 1/3 of the Adaptive Design badge under Build a Responsive Website.
The part of the challenge I am stuck on looks like this: "Add the appropriate CSS code to the CSS to make images scale with the fluid layout." /* Mobile ----------- */ @media screen and (max-width : 480px) { }
The image is: <img src="images/cupcake.jpg" alt="Smells Like Bakin">
I don't know what i'm doing wrong. I've tried using different id's, div's and class's but still can't seem to get it. I have a feeling its a very simple problem that I'm just over thinking or missed in the videos. Hopefully this is enough info on the problem I'm having to get some help.
10 Answers
Timothy Virden
9,792 PointsI finally figured out that I was just putting the code in under the "/* Mobile ----------- */ @media screen and (max-width : 480px)" section at the bottom and it needed to go under the img selector at the top of the CSS. I've still got a lot of learning to do. Thank you all for your help!
Daniel Sullivan
5,187 PointsI just tested the challenge and the only thing I added was max-width: 100% right before margin, seemed to work fine. It looks like you may have tried this though, so maybe something else is not working?
img { max-width: 100%; margin: 2% 0; }
Chris Turner
1,794 PointsI followed danielsullivan's advice and it worked for me. When I originally typed 'max-width', it was not highlighted in green like 'margin'. Deleting, reordering, and retyping the text did the trick.
Timothy Virden
9,792 PointsThe image is the cupcake.jpg but the link didn't show up in the post
James Barnett
39,199 PointsTo get your code to format properly in the forums use indent each line of you code.
There' also a link that says "Markdown Cheatsheet" which will fill you in on the other formatting options for posts.
Steve McKinney
29,274 PointsFrom what it asks it sounds like you would need:
img {
max-width: 100%; }
Nick Pettit
Treehouse TeacherHi Timothy,
I'm not sure what's going on, but I'll let Allison know so that she can take a look.
Timothy Virden
9,792 PointsThank you guys for the responses, I'm still trying to figure it out. I've tried the
img { max-width: 100%; }
img { width:100%; }
and tried messing with the margin, padding and giving it different classes/id's to see if it would work. I really think I'm just over looking a simple mistake but i can't seem to figure it out. Anyway, thanks again for the help, and I'll keep checking back here for updates.
ecp
838 Points@Timothy
Would you mind sending me a screenshot of the code challenge as you're working on it? My email is help@teamtreehouse.com
I think I know what is going on but I need to take a look at what you're giving as your answer. Thanks :D
Thank you, you guys are great! i was stuck on this same problem.