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

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

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">

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

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) { }