Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Justin Rich19,556 Points
Media queries don't work despite meta tag
The media queries on my page aren't working on devices (iphone, android) despite me having the following meta tag in my header: <meta name="viewport" content="width=device-width,initial-scale=1">
In chrome the page is responsive but when I pull it up on my phone or inspect the page as a different device it's not responsive. Any ideas on what may be happening?
Github project: https://github.com/justincrich/HackerPug
Jennifer NordellTreehouse Teacher
Hi there! I may be wrong here (and someone please let me know if I am), but after checking your CSS file I can only find media queries that apply when the viewport has a minimum width of 768px. If the size of the device is smaller than that, the other rules without the media query will apply. Phones generally have a pixel width in the range of about 480px wide. In mobile-first design we generally write out what CSS should apply at the smallest size and then go upwards
Your base CSS should say what your site looks like on a phone. Generally speaking, we then make a min-width for 480 and 768. Those will say what the site looks like if it gets bigger than a phone... and if it gets bigger than say the width of a tablet in portrait orientation.
Hope this helps!