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

General Discussion

Becky Castle
Becky Castle
15,294 Points
Posted by Becky Castle
Becky Castle
15,294 Points

When viewing my codepen design on my iphone, my media queries did not seem to work. Anyone know why?

I opened the "full page" version of a webpage I designed in codepen on my iphone, to see [at least one of] my media queries in action, but was sadly disappointed. Instead of resizing my webpage based on the screen size of my iphone, my webpage was pulled up in the full desktop size. Anyone know what I need to do to fix this?

Here's my codepen in full page. And here's my coding.

Thanks!

6 Answers

Arthur Verschaeve
Arthur Verschaeve
20,816 Points
Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Your media query works, but you need to add this to your head

<meta name="viewport" content="width=device-width">

This is cause the iphone noramally renders pages like there is a width of 980px

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Hi Arthur, I've added this tag to my head but have seen no improvement. I've even tried pasting it in before/ after the other tags in my head, because I thought it may not be working because of the order I had it in. Any further suggestions for me?

Arthur Verschaeve
Arthur Verschaeve
20,816 Points
Arthur Verschaeve
Arthur Verschaeve
20,816 Points

On line 144, the width isn't specified. In line 149 there is an error too. (in your css)

Arthur Verschaeve
Arthur Verschaeve
20,816 Points
Arthur Verschaeve
Arthur Verschaeve
20,816 Points

on my iphone, everything works good. https://www.dropbox.com/s/74ogrwks1jk8mb2/Screenshot%202014-04-19%2019.09.26.png

I think it simply doesn't work in codepen cause in codepen you only need to input the content of the body tag in the html area.

Chris Coyier
Chris Coyier
240 Points
Chris Coyier
Chris Coyier
240 Points

On CodePen specifically, we have a "Stuff for head" section in the HTML settings for putting stuff in the head section of the final rendered demo. You'll need to put the meta tag in there for it to take affect in Full Page view.

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Hey you guys rock! Thanks for the help.