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.

CSS

Justin Rich
Justin Rich
19,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

Site hackerpug.com

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse 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! :sparkles:

Justin Rich
Justin Rich
19,556 Points

Cool, that helped ... thanks!