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
troy beckett
12,035 PointsProblems with making a responsive webpage..
I'm currently working through the 'build a responsive website' project on treehouse. I've now just hit my first problem. I've tried to make the page more fluid. Therefore changing px to em or %. The website uses four pages of code. Index.html, grid.css, normalize.css and style.css. I've tried making the text, margin, images fluid and was expecting the webpage content to scale down as I made the browser smaller but for some reason it wont happen. I've been using notepad++ as my text editor and checking my updates using chrome as the browser.
What I've done is uploaded the code from notepad++ onto a treehouse workspace to show you my problem and also uploaded it on codepen so my code is available to see.
Your notice that when you scale the page down in the workspace preview url the page's content is not fluid. if you have any idea what I'm doing wrong let me know please. Thanks in advance.
workspace url: //web-thfd2xgnsj.treehouse-app.com/ codepen url: http://codepen.io/tbeckett24/pen/Eizue
look at my workspace before my pen to see the problem I'm having.
4 Answers
Ali M Malik
33,293 PointsFrom what I see in your pen is that the grid is working fine. First I don't see the fluid images styling, you need to make all images scale with their parent container. This is done by either styling the img tag with max-width: 100% or creating a class for fluid images and styling that. Also the next step to making your layout more mobile friendly is maybe a set of media queries to style things specifically for smaller screen resolutions.
Ali M Malik
33,293 PointsThis is exactly your pen with the images linked. It works fine for me. Check here and also on workspace here. I just copied your code exactly to see what's wrong and it worked for me without any input. Let me know how those work for you.
troy beckett
12,035 Points......wow that is wierd when I use your links it works fine but if I open my workspace or my notepad++ code it won't work at all. I did think when I put it in codepen that it was working but I didn't know whether codepen was just doing it itself. What advice would you give me on what to do next cos clearly I've done it right but it just won't work for me what do I do??????????????
Ali M Malik
33,293 PointsOne thing to maybe check is because codepen doesn't include a doctype tag or a head tag. Just something that I usually forget.
troy beckett
12,035 Pointstroy beckett
12,035 Pointsthanks for you answer, thanks for giving me your time. Thing is I forgot to add the img max-width% on my code pen I've added now my workspace code has it have look at my workspace url and scale that down and your see what I'm saying its exactly the same code as in codepen.
troy beckett
12,035 Pointstroy beckett
12,035 Pointswow that is wierd when I use your links it works fine but if I open my workspace or my notepad++ code it won't work at all. I did think when I put it in codepen that it was working but I didn't know whether codepen was just doing it itself. What advice would you give me on what to do next cos clearly I've done it right but it just won't work for me what do I do??????????????