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
Claire Wickenden
1,758 PointsAdaptive Design Challenge Task 1: I'm Stuck
Challenge task 1 of 3 Add the appropriate CSS code to the CSS to make images scale with the fluid layout. ..... I am stuck here, if anyone can help?
5 Answers
Jason Founts
Courses Plus Student 14,384 PointsYou need to set the width so that it is full width. If that doesn't help, I can give you the answer next.
Jason Founts
Courses Plus Student 14,384 PointsPS - Would love a dribbble invite. :)
Claire Wickenden
1,758 PointsOk. I tried to do img { width: 100%; } as well as all of the grid_1, grid_2, ... grid_12, { within the responsive css section of the code. It didn't work and this was all I could think of after viewing the video over again 3-4 times. :/
PS - Added you on dribbble!
Josh Flowers
7,010 PointsIs the container your img tags are in fluid? If the container is a fixed px amount, the image will never grow beyond that.
I'm sure I could fix the problem if I could see your exact code.
Claire Wickenden
1,758 Points/* Mobile ----------- */ @media screen and (max-width : 480px) { img { width: 100%; } }
This is what I have, also tried listing out the grid_1, grid_2, etc and neither worked.
Ok so obviously I need to do something with the container, but I'm not completely sure what you mean? Thanks for helping, by the way!
Josh Flowers
7,010 Pointsfor example:
<div class="fluid-picture-holder"> <img class="fluid-picture"> </div>
Styles:
.fluid-picture-holder { width:90px; }
If you set your img to be 100% and it's inside that div, the image will never get bigger than 90px.
but if you put the width on the div like so:
.fluid-picture-holder { width:100%; }
...the photo will grow as the screen width grows.
Claire Wickenden
1,758 PointsGreat thanks so much! Before I saw this I saw another post where someone said to use:
img { margin: 2% 0; width: 100%; height: 100%; }
alone, not in the @media screen tags... and it worked!
Thanks for your help!
Josh Flowers
7,010 PointsNo problem...just help me out with a dribbble invite if you ever get the chance to draft. I've been a prospect forever! lol http://dribbble.com/Joshmantis
Claire Wickenden
1,758 PointsDribbble invite... I've actually never heard this term. Is it more than just a follow? Josh Flowers
Josh Flowers
7,010 PointsYou can't post your own work on Dribbble until someone has drafted you.
Claire Wickenden
1,758 PointsOh gotcha... it seems I don't have any invites to give out at the moment :(
Josh Flowers
7,010 Pointswell, when you do...you know where to find me lol.
Woongshik Choi
42,387 PointsThanks! I got helped from this post.