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

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Posted by David Jones
David Jones
1,635 Points

Re-sizing viewport to 480px problem

Im on the 'Adding break points' CSS lesson and at the bit where Nick shows you how to have the background change from white to navy when you resize the viewport and make it bigger, only problem is mine is just navy all the time and I dont seem to be able to resize my viewport so its small enough, I can get it down to about 620px and then it wont reduce anymore and this the background stays navy.

I am using Chrome

4 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You might want to put the web page online and run your web page through Screenfly. www.quirktools.com/screenfly. That way you'll be able to test your page at any breakpoint or pixel width so you can verify that the media querites have worked. :)

jase richards
jase richards
10,379 Points
jase richards
jase richards
10,379 Points

I'm not sure what the issue is You mean to say when you try to make the browser window smaller then 620px it won't allow you to? That's really strange because you can make it as small as you want.

David Jones
David Jones
1,635 Points
David Jones
David Jones
1,635 Points

Thanks guys, it turns out it was actually a problem with Chrome not allowing me to resize that other people have had too and this worked fine in FF.

I actually have a couple of other problems though that I have now noticed, my images on the portfolio page dont seem to resize properly when I make the browser more narrow, they just get more and more narrow:

http://web-zj3ftb3k9v.treehouse-app.com/index.html

also when I resize on the About page once I get down to the smaller size the profile photo gets pushed up to the top right instead of repositioning to be above the text

http://web-zj3ftb3k9v.treehouse-app.com/about.html

I cant figure out what Ive done wrong here so any tips would be greatly appreciated.

David Jones
David Jones
1,635 Points
David Jones
David Jones
1,635 Points

ok I can now get Chrome to resize, I still have the same issue with the portfolio images but the profile photo on the about page repositions perfectly in Chrome but doesnt in FF, why would it work in one browser and not another?

I validated the main.css ok but when I tried to validate the responsive.css I get this parse error message:

Sorry! We found the following errors (1) URI : TextArea 75 Parse Error @media screen and (min-width: 660px) { /* Header */ nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; } #logo { float: left; margin-left: 5%; text-align: left; width: 45%; } h1 { font-size: 2.5em; } h2 { font-size: 0.825em; margin-bottom: 20px; } header { border-bottom: 5px solid #599a68; margin-bottom: 60px; } }

I dont understand what is wrong there though...