Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

troy beckett
troy beckett
12,035 Points

Problems 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

From 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.

troy beckett
troy beckett
12,035 Points

thanks 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
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??????????????

This 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
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??????????????

One thing to maybe check is because codepen doesn't include a doctype tag or a head tag. Just something that I usually forget.