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 Unused CSS Stages Media Queries Device-Specific Media Queries: Part 1

Majid Mokhtari
Majid Mokhtari
10,506 Points
Posted by Majid Mokhtari
Majid Mokhtari
10,506 Points

Media queries

I've put all the necessary media queries http://codepen.io/anon/pen/rukDJ but still when I view my website on iPhone it displays the desktop version, anybody knows why this happens?

4 Answers

Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

I believe you have to set the scale in the meta tag to 1 as follows:

<meta name="viewport" content="width=device-width, initial-scale-1.0">
Derick Moncado
Derick Moncado
23,259 Points
Derick Moncado
Derick Moncado
23,259 Points

Try a view port meta tag. The mobile browser will render the desktop version by default if a meta tag isn't present in the head of the HTML. Some thing like: 

<meta name="viewport" content="width=device-width, user-scalable=no">

Hope this helps man!

Majid Mokhtari
Majid Mokhtari
10,506 Points
Majid Mokhtari
Majid Mokhtari
10,506 Points

I've already put <meta name="viewport" content="width-device-width, intial-scale=1.0"> but doesn't work, do I need to use this code also in my css: @media screen and (max-device-width: 479px) { }