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 trialMark Tripney
7,839 Points'How to Make a Website' not responsive on mobile...
I've been working through the new 'How to Make a Website' project, and have got to the stage of uploading it. The site looks great on my laptop, changing layout as it should depending on browser-window size. However, it's not responsive on my iPhone 5 - it just shows a small version of the 'desktop' website. Any ideas?
EDIT: Found a solution on Stack Overflow: add this inside the <head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Works perfectly! Strange that it, or something like it, wasn't included in the project. Or am I missing something?!
2 Answers
Nick Pettit
Treehouse TeacherWow, this is actually a major oversight on my part. The viewport meta tag is in the example project I built before filming the course, but it looks like it never was added to the code in the videos or in the project files. Even in the website testing portion it obviously shows the desktop version on mobile devices. Doh. :(
Today is the end of the Treehouse 4-day work week, but I will implement a fix for this as soon as possible. Fortunately it's at the end of the project and not at the beginning, so we can make some cuts to the video and get this in there.
Sorry about this! You're absolutely right. Thank you for pointing this out to me.
Jeremiah Long
1,532 PointsYou missed when they discussed this. In order for the site to respond appropriately on mobile devices the viewport has to be set via meta tag. Sorry I wasn't here to respond to your question before you figured it out on your own. You didn't just find a solution, you found the answer.