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 Responsive Layouts Responsive Theory Course Overview

jsdevtom
jsdevtom
16,963 Points
Posted by jsdevtom
jsdevtom
16,963 Points

Without setting the viewport, your responsive designs will not work properly.

I can't remember a time when I learned this on treehouse, but this is critical. The line of code you need to add is this:

<meta name="viewport" content="width=device-width, initial-scale=1">

I was going crazy designing a responsive website because my header looked rubbish and when using the chrome dev tools to analyse other good looking webpages, the headers were, visually, a perfect size and yet had the exact same amount of pixels. So after, I don't know, an hour of googling, I found this from google developers which basically solved all the problems I was having like magic. Hope this helps someone :-)

3 Answers

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you! :) now i can read it and implement that im at home ^^

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Please someone write me here so i can have this saved since I'm on a public machine.

Erin Clayton
Erin Clayton
3,840 Points
Erin Clayton
Erin Clayton
3,840 Points

Stumbleupon is great for issues like this :P