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
Justin Rich
19,556 PointsMedia 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
Site hackerpug.com
2 Answers
Jennifer Nordell
Treehouse TeacherHi 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!
Justin Rich
19,556 PointsCool, that helped ... thanks!