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 beckett12,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.
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 beckett12,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.