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

CSS How to Make a Website Responsive Web Design and Testing Responsive Web Design

Posted by Valerie Schwartz
Valerie Schwartz
868 Points

Non-responsive design!

My website's design moves and rearranges like a dream when I change the browser size on the computer to about phone screen size, but this does not end up reflected in reality when I load the site on my phone. What am I doing wrong?

2 Answers

Aaron HARPT
Aaron HARPT
19,845 Points
Aaron HARPT
Aaron HARPT
19,845 Points

Try a meta viewport tag:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Agree with this, also reformatted the code so it would show. :)

Jacek Gałka
Jacek Gałka
8,044 Points
Jacek Gałka
Jacek Gałka
8,044 Points

This line right after the "head" tag fix the problem. Don't forget to change meta tag on all pages of your site.

Valerie Schwartz
Valerie Schwartz
868 Points
Valerie Schwartz
Valerie Schwartz
868 Points

Thank you guys for your help! I'm still trying to resolve the problem, though. I added the code, and even went back to double check for my "mobile first" approach, and it all looked good. I tested it on two different websites for screen resolution, and they both showed the site looking perfect for phones, tablets, desktops, the works. And then when I load and refresh the page on my own phone and my son's (for good measure, in case my phone had a case of the crazies) the site is still a teeny can't-really-read-it display of the full desktop version! So confused.